Small Box

Examples

Small boxes are compact UI blocks useful for dashboard summaries and quick stats. The component uses the .small-box wrapper with an inner content area .inner, an optional icon .small-box-icon, and an optional footer link .small-box-footer. Use background utility classes (for example bg-primary, bg-success, etc.) to provide context.

<div class="small-box text-bg-info mb-2">
<div class="inner">
  <h3>150</h3>
  <p>New Orders</p>
</div>
<div class="small-box-icon">
  <i class="bi bi-bag-fill"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="bi bi-chevron-right"></i></a>
</div>

<div class="small-box text-bg-success mb-2">
<div class="inner">
  <h3>
    53<sup style="font-size: .6rem">%</sup>
  </h3>
  <p>Bounce Rate</p>
</div>
<div class="small-box-icon">
  <i class="bi bi-graph-up"></i>
</div>
<a href="#" class="small-box-footer">
  View report <i class="bi bi-chevron-right"></i>
</a>
</div>

<div class="small-box text-bg-warning">
<div class="inner">
  <h3>44</h3>
  <p>User Registrations</p>
</div>
<div class="small-box-icon">
  <i class="bi bi-person-plus-fill"></i>
</div>
<a href="#" class="small-box-footer">
  Manage users <i class="bi bi-chevron-right"></i>
</a>
</div>

Overlay / Loading state

You can add an overlay to indicate loading or to temporarily block interaction. Place a .overlay element as a direct child of .small-box. The example below also demonstrates using an animated icon inside the overlay.

<div class="small-box text-bg-warning loading">
  <div class="overlay">
      <i class="bi bi-arrow-repeat fa-spin"></i>
      <span class="ms-2">Updating Revenue Data...</span>
  </div>
  <div class="inner">
      <h3>$24,895</h3>
      <p><i class="bi bi-graph-up me-1"></i>Monthly Revenue</p>
  </div>
  <div class="small-box-icon">
      <i class="bi bi-piggy-bank-fill"></i>
  </div>
  <a href="#" class="small-box-footer">
      View Revenue Report <i class="bi bi-arrow-right"></i>
  </a>
</div>

Footer link

Use .small-box-footer for a compact action area. It sits at the bottom of the component and provides a place for a link or CTA. Keep the text short and use an icon for affordance when appropriate.

<div class="small-box bg-info">
<div class="inner">
  <h3>75</h3>
  <p>Tasks</p>
</div>
<div class="small-box-icon">
  <i class="bi bi-list-task"></i>
</div>
<a href="#" class="small-box-footer">See tasks <i class="bi bi-chevron-right"></i></a>
</div>

Icons

The component is designed to work with icon fonts or inline SVG. Positioning and sizing are handled by the .small-box-icon rules in the component stylesheet. For best results use icons with a neutral color — the component applies a faded color by default.

<div class="small-box bg-danger">
<div class="inner">
  <h3>9</h3>
  <p>System Alerts</p>
</div>
<div class="small-box-icon">
  <!-- Example using Bootstrap Icons -->
  <i class="bi bi-exclamation-triangle-fill"></i>
</div>
<a href="#" class="small-box-footer">View alerts <i class="bi bi-chevron-right"></i></a>
</div>

Accessibility

• Ensure the numeric or descriptive content inside the .inner is descriptive enough for assistive technologies — do not rely on color or iconography alone to convey meaning.
• Footer links should have clear text (avoid "click here") and an accessible name.
• If a small box uses a purely decorative icon, mark it as aria-hidden (for example aria-hidden="true" on the icon element).