Bootstrap 5 Stats Band
A stats band is a full-width horizontal strip that presents a small set of key metrics or KPIs side by side, each consisting of a large numeral, a short label, and an optional supporting detail. It is assembled from Bootstrap 5's container, grid, text utilities, and background colour helpers — no official Bootstrap component exists for this pattern. Use it between page sections to reinforce credibility, summarise outcomes, or punctuate a narrative with data.
Primary Class
py-5 bg-dark text-whiteCommon Use Cases
- →A SaaS pricing page uses a stats band to display '10 million users', '99.9% uptime', and '4.8 star rating' between the hero and the feature grid, anchoring trust before the user scrolls to plans.
- →A charity annual-report site places a stats band showing total funds raised, number of projects funded, and countries reached directly above the testimonials section to validate impact claims with concrete figures.
- →An e-commerce site's about page inserts a stats band with order count, average delivery time, and return rate to differentiate itself from competitors before the team section.
- →A recruitment agency's homepage uses a stats band to highlight roles filled this year, average time-to-hire, and client retention rate as social proof between the hero banner and the job listings grid.
Variants & Classes
| Variant | Description |
|---|---|
| Dark background | High-contrast strip with white text on a dark or brand-coloured background. The default choice when the surrounding sections are light. |
| Light background | Subtle strip using a light grey background to separate sections without heavy contrast. Works well between two white content blocks. |
| Brand colour with dividers | Uses a primary or custom brand background with vertical border dividers between each stat cell to give clear visual separation. |
| Outline / bordered | Transparent background with a top and bottom border, allowing the stats to float between sections without introducing a new background colour. |
Code Example
<style>
.stats-band__value {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1;
}
.stats-band__label {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.75;
}
.stats-band__detail {
font-size: 0.85rem;
opacity: 0.6;
}
@media (min-width: 768px) {
.stats-band__cell + .stats-band__cell {
border-left: 1px solid rgba(255,255,255,0.2);
}
}
</style>
<section class="stats-band py-5 bg-dark text-white">
<div class="container">
<div class="row row-cols-2 row-cols-md-4 g-4 text-center">
<div class="col stats-band__cell">
<div class="stats-band__value">10M+</div>
<div class="stats-band__label mt-2">Active Users</div>
<div class="stats-band__detail mt-1">Across 120 countries</div>
</div>
<div class="col stats-band__cell">
<div class="stats-band__value">99.9%</div>
<div class="stats-band__label mt-2">Uptime SLA</div>
<div class="stats-band__detail mt-1">Guaranteed in all paid plans</div>
</div>
<div class="col stats-band__cell">
<div class="stats-band__value">£4.2B</div>
<div class="stats-band__label mt-2">Transactions processed</div>
<div class="stats-band__detail mt-1">In the last 12 months</div>
</div>
<div class="col stats-band__cell">
<div class="stats-band__value">4.8 ★</div>
<div class="stats-band__label mt-2">Average Rating</div>
<div class="stats-band__detail mt-1">From 18,000+ reviews</div>
</div>
</div>
</div>
</section>Live Examples
Light variant with three stats
A minimal three-column stats band on a light grey background, suitable for embedding between two white content sections without heavy visual contrast.
Brand colour with vertical dividers
A four-stat band using Bootstrap's bg-primary with semi-transparent vertical dividers drawn via CSS border-left on medium-and-up viewports. The dividers collapse on mobile automatically.
Outlined transparent band
A borderless-background variant that uses only top and bottom borders to frame the stats, keeping the section background colour visible underneath. Ideal for hero sections with gradient or image backgrounds.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Dark stats band with four KPIs and supporting detail lines
- ✓Light grey three-stat band between hero and features
- ✓Primary colour band with vertical dividers and icon above each metric
- ✓Transparent outlined band floating over a gradient hero section
- ✓Animated count-up stats band on scroll for a SaaS landing page
Best Practices
Responsive column counts with row-cols
Use Bootstrap's row-cols-2 row-cols-md-4 pattern so your stats stack in a 2×2 grid on mobile and spread to a single row on medium-and-up viewports. Avoid forcing all stats into one row on mobile — numerals get compressed and become unreadable. Always check on a 375 px viewport before shipping.
Keep vertical dividers conditional
Apply border-left dividers only at the md breakpoint and above using a single media query in your inline style block. On mobile the cells stack vertically, making vertical dividers redundant and visually confusing. Using rgba colours for the border keeps them subtle against both dark and coloured backgrounds without needing a separate custom property.
Use clamp() for fluid numeral sizing
A hard font-size like 3rem will either dwarf a narrow viewport or look small on a 4K display. Use font-size: clamp(2rem, 5vw, 3.5rem) on the value element so the numeral scales fluidly between a comfortable minimum and maximum without a cascade of breakpoint overrides. This keeps your CSS minimal and the component self-contained.
Avoid overloading with too many stats
Four to five metrics is the practical ceiling for a stats band before the row becomes visually congested and users stop reading. If you have more data to communicate, consider a dedicated metrics section with icon cards instead. Fewer, bolder numbers create more impact than a densely packed row.