→ 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.7k

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:
Shola Ajani

1 year ago

7.5k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

6.3k

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

Author:
Isaac Winslow

1 year ago

11.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

6.1k

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

1 year ago

4.6k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

1 year ago

9.2k

v.4.6
contact us page
do not copy

Author:
Fitar Ahmed

3 months ago

794

v.4.6
Footer
Simple footer with social icons

Author:
Prajwal Hallale

2 years ago

20.1k

v.5.3
Footer

Author:
Tanvir fahad

3 months ago

464

v.4.6
User Profile Card with Social Icons using Bootstrap 5 (without connect button)

Author:
Ranadhir Debnath

1 year ago

3.6k

v.5.3
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

1 year ago

5.4k

v.5.3
Clean CTA section

Author:
Juan Martinez

2 years ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent