→ Anonymous
→ Stats cards using Bootstrap 5

Stats cards using Bootstrap 5

Forked from> @anonymous/stats-cards-using-bootstrap-5

BS5 stat cards

This bootstrap css example is contributed by Anonymous, on 22-Jul-2026. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Info, Show info, Statistics

Tags: Stats

Author Anonymous

75

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<div class="container py-5">
  <div class="row row-cols-1 row-cols-md-4 g-4">
    <div class="col">
      <div class="card h-100 text-center shadow">
        <div class="card-body">
          <div class="display-4 text-primary mb-2">
            <i class="bi bi-people"></i>
          </div>
          <h2 class="card-title mb-3">1,234</h2>
          <p class="card-text text-muted">Active Users</p>
        </div>
      </div>
    </div>
    
    <div class="col">
      <div class="card h-100 text-center shadow">
        <div class="card-body">
          <div class="display-4 text-success mb-2">
            <i class="bi bi-graph-up"></i>
          </div>
          <h2 class="card-title mb-3">56%</h2>
          <p class="card-text text-muted">Growth Rate</p>
        </div>
      </div>
    </div>
    
    <div class="col">
      <div class="card h-100 text-center shadow">
        <div class="card-body">
          <div class="display-4 text-warning mb-2">
            <i class="bi bi-star"></i>
          </div>
          <h2 class="card-title mb-3">4.8</h2>
          <p class="card-text text-muted">Average Rating</p>
        </div>
      </div>
    </div>
    
    <div class="col">
      <div class="card h-100 text-center shadow">
        <div class="card-body">
          <div class="display-4 text-danger mb-2">
            <i class="bi bi-clock-history"></i>
          </div>
          <h2 class="card-title mb-3">98.3%</h2>
          <p class="card-text text-muted">Uptime</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 text-center shadow">
        <div class="card-body">
          <div class="display-4 text-danger mb-2">
            <i class="bi bi-clock-history"></i>
          </div>
          <h2 class="card-title mb-3">98.3%</h2>
          <p class="card-text text-muted">Uptime</p>
        </div>
      </div>
    </div>
  </div>
</div>

More Examples

Beautiful Stats Section
App stats section with icons. with hover effect

Author:
Riz Mohammad

2 years ago

2.5k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

4 weeks ago

84

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

3 weeks ago

71

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

3 weeks ago

93

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

4 weeks ago

72

v.5.3
Simple stats section
Minimalist stats example made with bootstrap 5

Author:
Tane Mahuta

2 years ago

1.7k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

6.1k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

4 weeks ago

72

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

1 year ago

4.5k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

2 years ago

15.2k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Amit Sharma

3 weeks ago

101

v.5.3
Responsive Dashboard Statistics Cards

Author:
Ankit khedkar

1 year ago

9.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2026 BootstrapExamples. All Rights Reserved.

v1.3