→ Isaac Winslow
→ Responsive Admin Dashboard Component

Responsive Admin Dashboard Component

This bootstrap css example is contributed by Isaac Winslow, on 24-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Admin Dashboard

Tags: Dashboard

Author Isaac Winslow

3.1k

v.5.3

Fork Fullscreen

<div class="container py-4">
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Dashboard Overview</h1>
            <p class="text-muted small mb-0">Welcome back, Admin</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-bell me-1"></i> Notifications
                </button>
            <button class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i> New Project
                </button>
        </div>
    </div>

<div class="row g-3 mb-4">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Total Users</h6>
                            <h3 class="mb-0">8,549</h3>
                            <small class="text-success">
                                    <i class="fas fa-arrow-up me-1"></i>12.5%
                                </small>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-3 rounded">
                            <i class="fas fa-users text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Revenue</h6>
                            <h3 class="mb-0">$24,890</h3>
                            <small class="text-success">
                                    <i class="fas fa-arrow-up me-1"></i>8.2%
                                </small>
                        </div>
                        <div class="bg-success bg-opacity-10 p-3 rounded">
                            <i class="fas fa-dollar-sign text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Orders</h6>
                            <h3 class="mb-0">1,236</h3>
                            <small class="text-danger">
                                    <i class="fas fa-arrow-down me-1"></i>3.1%
                                </small>
                        </div>
                        <div class="bg-warning bg-opacity-10 p-3 rounded">
                            <i class="fas fa-shopping-cart text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-2">Growth</h6>
                            <h3 class="mb-0">15.3%</h3>
                            <small class="text-success">
                                    <i class="fas fa-arrow-up me-1"></i>5.8%
                                </small>
                        </div>
                        <div class="bg-info bg-opacity-10 p-3 rounded">
                            <i class="fas fa-chart-line text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="row g-3">
        
        <div class="col-12 col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Recent Activity</h5>
                        <button class="btn btn-link text-decoration-none p-0">View All</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                                <div class="bg-primary bg-opacity-10 p-2 rounded">
                                    <i class="fas fa-user-plus text-primary"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">New user registered</h6>
                                <p class="text-muted small mb-0">2 minutes ago</p>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                                <div class="bg-success bg-opacity-10 p-2 rounded">
                                    <i class="fas fa-check text-success"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">Project milestone completed</h6>
                                <p class="text-muted small mb-0">1 hour ago</p>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <div class="bg-warning bg-opacity-10 p-2 rounded">
                                    <i class="fas fa-bell text-warning"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">New feature release</h6>
                                <p class="text-muted small mb-0">2 hours ago</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary">
                                <i class="fas fa-plus me-2"></i>Add New Project
                            </button>
                        <button class="btn btn-outline-success">
                                <i class="fas fa-users me-2"></i>Manage Team
                            </button>
                        <button class="btn btn-outline-info">
                                <i class="fas fa-cog me-2"></i>Settings
                            </button>
                        <button class="btn btn-outline-warning">
                                <i class="fas fa-file-alt me-2"></i>Generate Report
                            </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Isaac Winslow

1 year ago

10k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

5.1k

v.5.3
Activity Logs Dashboard
activity logs component with timeline visualization, export functionality, and detailed event tracking in Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

5.3k

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

1 year ago

3.8k

v.5.3
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Shola Ajani

1 year ago

6.7k

v.5.3
Timer with bootstrap

Author:
Anonymous

1 year ago

3.8k

v.5.3
Basic Breadcrumb

Author:
Mateo Rojas

1 year ago

1.2k

v.5.3
Gallery caraousel

Author:
java stories story

7 months ago

1.1k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

5.1k

v.5.3
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

2.8k

v.4.6
Testimonial carousel

Author:
Sofia Petrova

1 year ago

2.3k

v.5.3
Collapsible Sidebarteste

Author:
Bruno Dezan

11 months ago

5.9k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent