→ Amit Sharma
→ Stats cards using Bootstrap 5

Stats cards using Bootstrap 5

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

BS5 stat cards

This bootstrap css example is contributed by Amit Sharma, on 29-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 Amit Sharma

v.5.3

Fork Fullscreen

<div class="col">
      <div class="card h-100 text-center shadow card-green">
        <div class="card-body">          
          <h5 class="card-title mb-3">56%</h5>
          <p class="card-text text-muted">TSP Allocation</p>
        </div>
      </div>
    </div>

<div class="col">
      <div class="card h-100 text-center shadow card-orange">
        <div class="card-body">          
          <h5 class="card-title mb-3">4.8</h5>
          <p class="card-text text-muted">( * ) TSP Expenditure</p>
        </div>
      </div>
    </div>

<div class="col">
      <div class="card h-100 text-center shadow card-purple">
        <div class="card-body">          
          <h5 class="card-title mb-3">98.3%</h5>
          <p class="card-text text-muted">% TSP Allocation(out of Total State Scheme Allocation)</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 text-center shadow card-pink">
        <div class="card-body">          
          <h5 class="card-title mb-3">98.3%</h5>
          <p class="card-text text-muted">% TSP Expenditure vis a vis State TSP Allocation</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 text-center shadow card-pink">
        <div class="card-body">          
          <h5 class="card-title mb-3">98.3%</h5>
          <p class="card-text text-muted">% TSP Expenditure vis a vis State TSP Allocation</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 text-center shadow card-pink">
        <div class="card-body">          
          <h5 class="card-title mb-3">98.3%</h5>
          <p class="card-text text-muted">% TSP Expenditure vis a vis State TSP Allocation</p>
        </div>
      </div>
    </div>
  </div>
</div>

More Examples

Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 week ago

31

v.5.3
Responsive Dashboard Statistics Cards

Author:
Ankit khedkar

1 year ago

9k

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

Author:
Riz Mohammad

2 years ago

2.4k

v.5.3
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

1 year ago

6.1k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 week ago

25

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

Author:
Tane Mahuta

2 years ago

1.7k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 week ago

31

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 week ago

24

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 week ago

31

v.5.3
Stats section
Show your product/website stats beautifully

Author:
Nguyen Minh

2 years ago

2.7k

v.4.6
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 week ago

25

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

1 year ago

4.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent