Bootstrap 5Content

Bootstrap 5 Icon Box

An Icon Box is a content component that pairs an icon with a heading and short description, typically arranged in a card-like block. It's used to present features, services, or benefits in a scannable, visually organised format. Use it on landing pages, service overviews, or anywhere you need to communicate multiple parallel concepts at a glance.

Primary Class

.icon-box

Common Use Cases

→A SaaS pricing page listing three core product features — each with a distinct icon, bold heading like 'Real-time Analytics', and a one-line description
→A digital agency 'Services' section showing offerings such as SEO, Web Design, and PPC — each in its own icon box within a Bootstrap grid column
→An e-commerce 'Why Buy From Us' strip with icon boxes for Free Shipping, 30-Day Returns, and Secure Checkout displayed horizontally across the footer
→A healthcare app onboarding screen walking users through three steps — Book, Consult, Receive — each with a numbered icon and action-oriented copy

Variants & Classes

Variant	Description	Classes
Icon Box Default	Standard icon box with Bootstrap's default styling.	`icon-box`
Icon Box Responsive	Responsive variant that adapts to different screen sizes.	`icon-box icon-box-responsive`

Code Example

<div class="row g-4">
  <div class="col-md-4">
    <div class="icon-box p-4 border rounded-3 h-100">
      <div class="icon-box-icon mb-3">
        <i class="bi bi-shield-check fs-2 text-primary"></i>
      </div>
      <h5 class="icon-box-title fw-semibold mb-2">Enterprise Security</h5>
      <p class="icon-box-text text-muted mb-0">Your data is encrypted at rest and in transit with AES-256. SOC 2 Type II certified infrastructure included on all plans.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="icon-box p-4 border rounded-3 h-100">
      <div class="icon-box-icon mb-3">
        <i class="bi bi-bar-chart-line fs-2 text-primary"></i>
      </div>
      <h5 class="icon-box-title fw-semibold mb-2">Real-time Analytics</h5>
      <p class="icon-box-text text-muted mb-0">Monitor campaign performance with live dashboards. Drill down by channel, date range, or audience segment without page refreshes.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="icon-box p-4 border rounded-3 h-100">
      <div class="icon-box-icon mb-3">
        <i class="bi bi-plug fs-2 text-primary"></i>
      </div>
      <h5 class="icon-box-title fw-semibold mb-2">One-click Integrations</h5>
      <p class="icon-box-text text-muted mb-0">Connect Slack, HubSpot, Zapier, and 80+ other tools in seconds. No developer required — just authenticate and map your fields.</p>
    </div>
  </div>
</div>

Live Examples

Basic Icon Box

Example 1

Enterprise Security

Your data is encrypted at rest and in transit with AES-256. SOC 2 Type II certified infrastructure included on all plans.

Real-time Analytics

Monitor campaign performance with live dashboards. Drill down by channel, date range, or audience segment without page refreshes.

One-click Integrations

Connect Slack, HubSpot, Zapier, and 80+ other tools in seconds. No developer required — just authenticate and map your fields.

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated icon box with custom colours
✓Icon Box with interactive states
✓Responsive icon box for all screen sizes

Best Practices

Use h-100 to keep icon box cards equal height

Add the Bootstrap utility class `h-100` to the inner `.icon-box` div and wrap the row with `g-4` for gutters — this prevents uneven card heights when descriptions vary in length across columns.

Wrap the icon in a background circle for visual weight

Apply `bg-primary bg-opacity-10 rounded-circle p-3 d-inline-flex` to the icon container to give it a soft tinted background — this creates contrast without relying on a heavy filled icon style.

Align icon boxes horizontally on mobile with flex utilities

For a compact mobile layout, add `d-flex align-items-start gap-3` to the `.icon-box` and move the icon alongside the text rather than stacked — this saves vertical space on small screens.

Limit icon box columns to three per row for readability

More than four icon boxes per row compresses text to the point where line breaks become awkward. Use `col-md-4` for three columns or `col-md-6` for two, and stack to `col-12` on mobile by default.

FAQ

Does Bootstrap 5 have a built-in Icon Box component?

Bootstrap 5 does not ship a dedicated Icon Box component — it's a design pattern built by composing existing Bootstrap utilities. You combine the grid system (`col-md-4`), spacing utilities (`p-4`, `mb-3`), border utilities (`border`, `rounded-3`), and typography classes (`fw-semibold`, `text-muted`) with an icon library like Bootstrap Icons (`bi`), Font Awesome, or SVG icons. Canvas HTML templates codify this pattern as a reusable, pre-styled block.

How do I change the icon colour to match my brand in an Icon Box?

The simplest approach is to use Bootstrap's contextual text colour utilities — `text-primary`, `text-success`, `text-warning` etc. — directly on the `<i>` tag. If you're using CSS custom properties (which Bootstrap 5 does), override `--bs-primary` in your root stylesheet to your brand hex value and all `text-primary` instances will update automatically. For per-box colours, apply a custom class like `text-brand-teal` and define it in your own CSS file.

How does Canvas Builder generate Icon Box components?

When you describe a features or services section in Canvas Builder, it generates a fully structured Icon Box grid with your actual content — real headings, real descriptions, and contextually appropriate Bootstrap Icons selected to match each feature. It applies your brand's primary colour to icon elements, outputs a responsive `col-12 col-md-4` grid by default, and wraps everything in semantic HTML ready to paste directly into your project.