Bootstrap 5Content

Bootstrap 5 Stat Counter

A Stat Counter component displays key metrics or achievements as large, visually prominent numbers alongside short descriptive labels — typically used in rows of three to five stats. It communicates impact at a glance, making it ideal for homepages, about pages, and landing sections where credibility needs to be established quickly. Use it when you have concrete, impressive numbers that reinforce trust: revenue figures, user counts, project totals, or performance benchmarks.

Primary Class

.stat-counter

Common Use Cases

→SaaS landing page showing '14,000+ active users', '99.9% uptime', and '$2.4M saved by customers' to build product credibility above the fold
→Agency about page displaying '127 projects delivered', '12 years in business', and '94% client retention rate' to establish track record
→Nonprofit donation page featuring '3.2M meals funded', '48 countries reached', and '12,000 volunteers' to motivate further giving
→E-commerce brand homepage highlighting '4.8★ average rating', '250,000 orders shipped', and '60-day free returns' to reduce purchase hesitation

Variants & Classes

Variant	Description	Classes
Stat Counter Default	Standard stat counter with Bootstrap's default styling.	`stat-counter`
Stat Counter Responsive	Responsive variant that adapts to different screen sizes.	`stat-counter stat-counter-responsive`

Code Example

<section class="py-5 bg-light">
  <div class="container">
    <div class="row text-center gy-4">

      <div class="col-6 col-md-3">
        <div class="p-4">
          <div class="display-4 fw-bold text-primary mb-1">14,200+</div>
          <p class="text-muted mb-0 small text-uppercase fw-semibold ls-1">Active Users</p>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <div class="p-4">
          <div class="display-4 fw-bold text-primary mb-1">99.9%</div>
          <p class="text-muted mb-0 small text-uppercase fw-semibold">Uptime SLA</p>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <div class="p-4">
          <div class="display-4 fw-bold text-primary mb-1">$2.4M</div>
          <p class="text-muted mb-0 small text-uppercase fw-semibold">Customer Savings</p>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <div class="p-4">
          <div class="display-4 fw-bold text-primary mb-1">127</div>
          <p class="text-muted mb-0 small text-uppercase fw-semibold">Enterprise Clients</p>
        </div>
      </div>

    </div>
  </div>
</section>

Live Examples

Basic Stat Counter

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated stat counter with custom colours
✓Stat Counter with interactive states
✓Responsive stat counter for all screen sizes

Best Practices

Use col-6 on mobile to keep stats in a 2×2 grid

Stacking four stats vertically on mobile forces users to scroll past all of them before seeing other content. Using col-6 col-md-3 keeps pairs of stats side-by-side on small screens, preserving the visual density that makes this component effective.

Pair display-4 with fw-bold for maximum number weight

Bootstrap's display-* utilities increase font size but don't change weight — combining display-4 fw-bold gives you the large, heavy numerals that make stat counters scannable, without needing custom CSS or a separate heading tag.

Add a subtle left border to divide stats without a full card

Add border-start border-3 border-primary to each stat wrapper to visually separate columns with a coloured accent line — this avoids the boxed-card look while still giving each stat a clear boundary, especially on wide desktop layouts.

Keep labels under four words and use uppercase

Stat labels compete with the number for attention — short uppercase labels in text-muted small text visually recede behind the number, letting the metric land first and the context follow naturally.

FAQ

Should I use heading tags or div tags for the stat numbers?

Use a div or span with display-* classes rather than h1–h6 tags for stat numbers. Heading tags carry semantic meaning for screen readers and SEO crawlers — multiple h2 elements all containing just numbers dilutes heading hierarchy. If the stat section has a section heading like 'Our Impact', that can be an h2, and the individual numbers can be styled divs. You can still make them visually prominent using display-4 fw-bold without misusing heading semantics.

How do I animate the numbers counting up when the section scrolls into view?

Bootstrap 5 doesn't include a built-in counter animation, but you can add lightweight vanilla JS using the Intersection Observer API. Set a data attribute like data-target='14200' on each number element, observe when the container enters the viewport, then increment from 0 to the target value over roughly 1.5–2 seconds using requestAnimationFrame. For a ready-made solution, libraries like CountUp.js (under 3KB gzipped) integrate cleanly without jQuery and respect prefers-reduced-motion when configured correctly.

How does Canvas Builder generate a Stat Counter component?

Canvas Builder reads your prompt for specific metrics or infers relevant stats from your described industry and generates the full Bootstrap 5 Stat Counter section with your brand's primary colour applied to the number elements. It outputs a responsive four-column grid using col-6 col-md-3, applies your chosen section background (light, dark, or transparent), and writes realistic label copy matched to your business context — not placeholder text.