→ 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

6.6k

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

Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 month ago

114

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Amit Sharma

1 month ago

193

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 month ago

118

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

Author:
Nguyen Minh

2 years ago

2.8k

v.4.6
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 month ago

101

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

Author:
Riz Mohammad

2 years ago

2.6k

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

Author:
Tane Mahuta

2 years ago

1.8k

v.5.3
Responsive Dashboard Statistics Cards

Author:
Ankit khedkar

1 year ago

9.4k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

6.4k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 month ago

116

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 month ago

99

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

Author:
Mishti

2 years ago

4.6k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent