→ Alaric Sloane
→ Modern Dashboard Analytics Card

Modern Dashboard Analytics Card

A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

This bootstrap css example is contributed by Alaric Sloane, on 02-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Info, Show info, Statistics

Tags: Stats

Author Alaric Sloane

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="row g-4">
                
                <div class="col-md-4">
                    <div class="stat-card p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="stat-icon bg-primary bg-opacity-10">
                                <i class="fas fa-chart-line text-primary fs-4"></i>
                            </div>
                            <span class="badge bg-success">+12.5%</span>
                        </div>
                        <h5 class="mb-1">Revenue</h5>
                        <h3 class="mb-3">$84,245</h3>
                        <div class="progress mb-2">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%"></div>
                        </div>
                        <small class="text-muted">Monthly target: $100,000</small>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="stat-card p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="stat-icon bg-warning bg-opacity-10">
                                <i class="fas fa-users text-warning fs-4"></i>
                            </div>
                            <span class="badge bg-success">+8.2%</span>
                        </div>
                        <h5 class="mb-1">Active Users</h5>
                        <h3 class="mb-3">12,849</h3>
                        <div class="progress mb-2">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 65%"></div>
                        </div>
                        <small class="text-muted">Monthly active users growth</small>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="stat-card p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="stat-icon bg-success bg-opacity-10">
                                <i class="fas fa-shopping-cart text-success fs-4"></i>
                            </div>
                            <span class="badge bg-success">+15.7%</span>
                        </div>
                        <h5 class="mb-1">Orders</h5>
                        <h3 class="mb-3">1,483</h3>
                        <div class="progress mb-2">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 85%"></div>
                        </div>
                        <small class="text-muted">Monthly order completion rate</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Beautiful Stats Section
App stats section with icons. with hover effect

Author:
Riz Mohammad

3 months ago

262

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

2 months ago

150

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

3 months ago

717

v.5.3
Stats section
Show your product/website stats beautifully

Author:
Nguyen Minh

5 months ago

265

v.4.6
Stats card made with boostrap 4.6
Minimal admin stats card

Author:
Mishti

4 months ago

284

v.4.6
Responsive Dashboard Statistics Cards

Author:
Ankit khedkar

2 weeks ago

52

v.5.3
Simple stats section
Minimalist stats example made with bootstrap 5

Author:
Tane Mahuta

3 months ago

284

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

2 months ago

1.6k

v.4.6
Sidebar navigation with toggle button

Author:
Moana silva

3 months ago

193

v.5.3
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

1 week ago

38

v.5.3
Steps section

Author:
Ankit khedkar

2 months ago

262

v.5.3
Pill Buttons

Author:
Prajwal Hallale

7 months ago

241

v.4.6

Didn't find component you were looking for?

Search from 200+ componenent