Bootstrap Dashboard Stats Cards

Four small cards that show the main numbers of a dashboard: users, sales, orders and a goal with a progress bar. The icons come from Bootstrap Icons.

<div class="container-fluid">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-3">
    <div class="col">
      <div class="card h-100"><div class="card-body d-flex align-items-center">
        <div class="rounded-circle bg-primary-subtle text-primary-emphasis p-3 me-3"><i class="bi bi-people fs-4"></i></div>
        <div><div class="text-body-secondary small">Users</div><div class="fs-4 fw-bold">1,284</div></div>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body d-flex align-items-center">
        <div class="rounded-circle bg-success-subtle text-success-emphasis p-3 me-3"><i class="bi bi-currency-rupee fs-4"></i></div>
        <div><div class="text-body-secondary small">Sales</div><div class="fs-4 fw-bold">92,450</div></div>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body d-flex align-items-center">
        <div class="rounded-circle bg-warning-subtle text-warning-emphasis p-3 me-3"><i class="bi bi-bag fs-4"></i></div>
        <div><div class="text-body-secondary small">Orders</div><div class="fs-4 fw-bold">342</div></div>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body">
        <div class="d-flex justify-content-between"><span class="text-body-secondary small">Monthly goal</span><span class="fw-bold">72%</span></div>
        <div class="progress mt-2" role="progressbar" aria-label="Monthly goal" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
          <div class="progress-bar bg-info" style="width: 72%"></div>
        </div>
      </div></div>
    </div>
  </div>
</div>

How it works

• row-cols-1 row-cols-sm-2 row-cols-xl-4 shows 1, 2 or 4 cards per row, depending on the screen.
• The icon sits in a round box made with rounded-circle p-3 and the “subtle” colors, which also look good in dark mode.
• d-flex align-items-center puts the icon and the text side by side.

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.