Skip to content
Bootstrap 5Content

Bootstrap 5 Stat Counter

A Stat Counter is a Bootstrap 5 UI component that displays key metrics or numerical achievements in a visually prominent format: typically a large number, a label, and an optional icon or descriptor. It's used to build trust, communicate scale, and highlight business impact at a glance. Use it on landing pages, about sections, and product pages where social proof through numbers strengthens credibility.

Bootstrap class

No dedicated Bootstrap class

Common use cases

  • A SaaS product page showing metrics like '14,000+ active users', '99.9% uptime', and '4.8/5 average rating' to reduce signup hesitation
  • A charity or nonprofit homepage displaying total funds raised, number of projects completed, and countries reached to demonstrate real-world impact
  • An agency portfolio section highlighting years in business, clients served, awards won, and team size to establish authority before showcasing work
  • An e-commerce site's homepage counter showing products sold, satisfied customers, and average delivery time to reinforce reliability during purchase decisions

Variants and classes

VariantDescription and classes
Stat gridTwo stats per row on mobile, four on desktop.row row-cols-2 row-cols-md-4 g-4 text-center
Large numberOversized figure with a short label underneath.display-5 fw-bold text-primary
Card per statEach figure in a white, softly shadowed tile.p-4 bg-white rounded shadow-sm h-100
Dark bandFull-width dark strip for a results section.bg-dark text-white py-5

Code example

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

      <div class="col-6 col-md-3">
        <div class="p-4 bg-white rounded shadow-sm h-100">
          <div class="display-5 fw-bold text-primary mb-1">14,200+</div>
          <div class="text-muted small text-uppercase fw-semibold">Active Users</div>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <div class="p-4 bg-white rounded shadow-sm h-100">
          <div class="display-5 fw-bold text-primary mb-1">99.9%</div>
          <div class="text-muted small text-uppercase fw-semibold">Uptime SLA</div>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <div class="p-4 bg-white rounded shadow-sm h-100">
          <div class="display-5 fw-bold text-primary mb-1">4.8 / 5</div>
          <div class="text-muted small text-uppercase fw-semibold">Average Rating</div>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <div class="p-4 bg-white rounded shadow-sm h-100">
          <div class="display-5 fw-bold text-primary mb-1">120+</div>
          <div class="text-muted small text-uppercase fw-semibold">Countries Served</div>
        </div>
      </div>

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

Live examples

Basic Stat Counter

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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

Best practices

Lead with the number, not the label

Place the metric value above the descriptor text. Users scan visually, and a large number grabs attention first. Use Bootstrap's display-5 or display-4 class on the value and small text-uppercase on the label to create clear visual hierarchy.

Use a count-up animation for engagement

Pair your stat counters with a lightweight JavaScript count-up library (like CountUp.js) triggered on scroll entry via the Intersection Observer API. This draws attention to the section and makes the numbers feel earned rather than static.

Keep stats verifiable and specific

Round numbers like '10,000+' feel vague and manufactured; '11,340 customers' reads as real data. Specificity increases perceived credibility, especially on B2B pages where buyers are skeptical.

Avoid more than 5 stats in a single row

Beyond four or five metrics, cognitive load increases and each stat loses individual weight. If you have more data to share, group them into thematic sections or use a tabbed layout to keep focus sharp.

FAQ

Should Stat Counters use a background colour or stay neutral?
It depends on placement. If the stat counter section sits between two white content sections, a contrasting background, such as bg-primary text-white or a subtle bg-light, helps it stand out visually and signals a section break. If the page already has strong colour variation, a plain white card with a shadow-sm border is less visually noisy and lets the numbers do the work.
How do I customise the number colour and font size without overriding Bootstrap defaults?
Use Bootstrap 5's utility classes first: text-primary, text-success, or text-danger cover most brand needs without custom CSS. For font sizing, display-3 through display-6 give you a range from 3.5rem down to 1.5rem. If you need a specific brand colour not in Bootstrap's palette, add a single CSS custom property: --bs-primary: #your-hex; in your root stylesheet and Bootstrap's text-primary will inherit it automatically.
How does Canvas Builder handle Stat Counter generation?
Canvas Builder generates Stat Counter components by reading your prompt context: for example, if you describe a SaaS product or agency, it populates realistic placeholder metrics appropriate to that industry. It applies your brand's primary colour to the number values, outputs a fully responsive grid using Bootstrap's col-6 col-md-3 pattern so the layout adapts from 2-column mobile to 4-column desktop, and wraps everything in semantic HTML ready for production use.