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

ClassWhat It Does
.col-sm-6.col-xl-3Responsive 4-column stat row
.border-top.border-4Colored top accent border
.progress + .progress-barGoal completion bar
text-success / text-dangerTrend 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.

Related Components