Bootstrap 5 stat cards display key metrics on admin dashboards. This page covers 4 stat card patterns — basic with icons, colored border, progress bar and dark gradient cards.
Key Classes Reference
| Class | What It Does |
|---|---|
.col-sm-6.col-xl-3 | Responsive 4-column stat row |
.border-top.border-4 | Colored top accent border |
.progress + .progress-bar | Goal completion bar |
text-success / text-danger | Trend color indicators |
1. Basic Bootstrap 5 Stat Cards
4-column stat card row with metric value, label and trend indicator.
2. Bootstrap 5 Stat Cards with Color Border
Stat cards with colored top border accent — a popular admin dashboard pattern.
3. Bootstrap 5 Stat Cards with Progress
Stat cards with a progress bar showing goal completion — common in sales dashboards.
4. Bootstrap 5 Dark Stat Cards
Dark themed stat cards with gradient accent — for dark admin dashboards.
Frequently Asked Questions
Use col-sm-6 col-xl-3 on each card column: 1 column on mobile, 2 on tablet, 4 on desktop. Add h-100 to cards for equal heights. Wrap in row g-3 for consistent gutters.
Use Unicode arrows or Bootstrap Icons: ↑ for up trend, ↓ for down. Apply text-success for positive and text-danger for negative trends. Or use Bootstrap Icons: <i class='bi bi-arrow-up text-success'></i>.
Use a JavaScript counter: function animateValue(el, end, duration) { let start = 0; const step = Math.ceil(end / (duration/16)); const timer = setInterval(() => { start = Math.min(start + step, end); el.textContent = start.toLocaleString(); if(start === end) clearInterval(timer); }, 16); }. Call on DOMContentLoaded.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.