Bootstrap 5Layout

Bootstrap 5 Feature Grid

A feature grid is a structured layout that presents a set of product benefits, service highlights, or capability summaries in a repeating grid of cells, each containing an icon or image, a heading, and a short description. It is composed from Bootstrap 5's grid system (row, col-*), card or flex utilities, and spacing helpers — Bootstrap ships no official feature-grid component. Use it on landing pages, product overview sections, and pricing-support pages where you need to communicate several distinct points at a glance.

Primary Class

.row.row-cols-1.row-cols-md-3

Common Use Cases

→A SaaS product page listing six platform capabilities — such as real-time sync, role-based access, and audit logs — each in its own icon-topped card within a three-column grid.
→An agency services section showing four offerings (brand strategy, web design, SEO, and paid media) as equal-height cards with hover-lift effects built from Bootstrap shadow and transition utilities.
→A healthcare app onboarding screen that presents five patient benefits using a two-column mobile grid that expands to four columns on desktop, keeping the layout readable at every breakpoint.
→An e-commerce checkout page reassurance bar displaying icons for free delivery, secure payment, 30-day returns, and 24/7 support in a compact single-row four-column grid.

Variants & Classes

Variant	Description	Classes
Icon Card Grid	Each feature sits inside a Bootstrap card with a top-aligned icon rendered as an inline SVG or Font Awesome glyph, a bold heading, and two lines of body text. Cards stretch to equal height using d-flex flex-column on the card body.	`row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 card h-100 d-flex flex-column`
Icon-Left Inline Grid	Icon and text sit side by side in each cell using d-flex and gap-3, removing the card border for a lighter, editorial look. Suitable for dense feature lists of eight or more items.	`row row-cols-1 row-cols-md-2 g-4 d-flex align-items-start gap-3`
Centered Minimal Grid	Icon, heading, and description are all centre-aligned with text-center. No card border or background; relies on generous padding and a subtle background colour on the section itself to create visual grouping.	`row row-cols-2 row-cols-lg-4 g-4 text-center`
Bordered Highlight Grid	Each cell uses border border-primary rounded-3 with a coloured top accent achieved via a short custom CSS rule. Best for pricing-support or comparison contexts where differentiation between features matters.	`row row-cols-1 row-cols-md-3 g-4 border border-primary rounded-3 p-4`

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Grid</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <style>
    .feature-card {
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .feature-card:hover {
      box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.12);
      transform: translateY(-3px);
    }
    .feature-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.75rem;
      font-size: 1.5rem;
      flex-shrink: 0;
    }
  </style>
</head>
<body class="py-5 bg-light">
  <section class="container">
    <div class="row mb-5 text-center">
      <div class="col-lg-7 mx-auto">
        <h2 class="fw-bold">Everything you need to ship faster</h2>
        <p class="text-secondary mt-2">A concise overview of the platform capabilities that help engineering teams reduce cycle time and improve reliability.</p>
      </div>
    </div>

    <!-- Feature Grid: 1 col mobile → 2 col tablet → 3 col desktop -->
    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">

      <!-- Feature 1 -->
      <div class="col">
        <div class="card h-100 border-0 shadow-sm feature-card">
          <div class="card-body p-4">
            <div class="feature-icon bg-primary bg-opacity-10 text-primary mb-3">
              &#x26A1;
            </div>
            <h5 class="card-title fw-semibold">Real-time sync</h5>
            <p class="card-text text-secondary">Changes propagate across all connected clients in under 200 ms with built-in conflict resolution.</p>
          </div>
        </div>
      </div>

      <!-- Feature 2 -->
      <div class="col">
        <div class="card h-100 border-0 shadow-sm feature-card">
          <div class="card-body p-4">
            <div class="feature-icon bg-success bg-opacity-10 text-success mb-3">
              &#x1F512;
            </div>
            <h5 class="card-title fw-semibold">Role-based access</h5>
            <p class="card-text text-secondary">Assign granular permissions at team, project, or resource level with full audit history.</p>
          </div>
        </div>
      </div>

      <!-- Feature 3 -->
      <div class="col">
        <div class="card h-100 border-0 shadow-sm feature-card">
          <div class="card-body p-4">
            <div class="feature-icon bg-warning bg-opacity-10 text-warning mb-3">
              &#x1F4CA;
            </div>
            <h5 class="card-title fw-semibold">Advanced analytics</h5>
            <p class="card-text text-secondary">Pre-built dashboards surface deployment frequency, lead time, and error rates without extra tooling.</p>
          </div>
        </div>
      </div>

      <!-- Feature 4 -->
      <div class="col">
        <div class="card h-100 border-0 shadow-sm feature-card">
          <div class="card-body p-4">
            <div class="feature-icon bg-danger bg-opacity-10 text-danger mb-3">
              &#x1F6E1;
            </div>
            <h5 class="card-title fw-semibold">Automated backups</h5>
            <p class="card-text text-secondary">Hourly snapshots are retained for 90 days and can be restored to any point with one click.</p>
          </div>
        </div>
      </div>

      <!-- Feature 5 -->
      <div class="col">
        <div class="card h-100 border-0 shadow-sm feature-card">
          <div class="card-body p-4">
            <div class="feature-icon bg-info bg-opacity-10 text-info mb-3">
              &#x1F310;
            </div>
            <h5 class="card-title fw-semibold">Global CDN</h5>
            <p class="card-text text-secondary">Static assets are served from 45 edge locations, reducing median TTFB to under 80 ms worldwide.</p>
          </div>
        </div>
      </div>

      <!-- Feature 6 -->
      <div class="col">
        <div class="card h-100 border-0 shadow-sm feature-card">
          <div class="card-body p-4">
            <div class="feature-icon bg-secondary bg-opacity-10 text-secondary mb-3">
              &#x1F9E9;
            </div>
            <h5 class="card-title fw-semibold">API-first design</h5>
            <p class="card-text text-secondary">Every action available in the UI is exposed via a versioned REST and GraphQL API with OpenAPI docs.</p>
          </div>
        </div>
      </div>

    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Live Examples

Icon-Left Inline Feature Grid

A borderless two-column grid where each feature uses d-flex to place a rounded icon box to the left of the text. Works well for eight or more features where card borders would feel heavy.

Example 1

Centered Minimal Four-Column Grid

A four-column grid with centred text and no card borders, relying on a section background colour for visual grouping. Typical use is a reassurance bar near a checkout or sign-up CTA.

Example 2

Bordered Highlight Grid with Top Accent

Each card uses a thick top border in the brand colour to add visual differentiation between features. The accent is applied via a small custom CSS rule; everything else is standard Bootstrap 5 utilities.

Example 3

Canvas Framework Variants

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

✓Icon card grid generated from a bulleted list of product features
✓Icon-left inline grid auto-built from a services description prompt
✓Centered minimal reassurance bar created from a checkout page prompt
✓Bordered highlight grid produced when a comparison or pricing-support context is detected
✓Dark-background feature grid rendered when a dark colour scheme is specified in the prompt

Best Practices

Use h-100 on every card to force equal heights

When feature cards contain varying amounts of text, some will be taller than others. Adding h-100 to the card element and ensuring the parent column is a flex container (which row-cols-* handles automatically) forces all cards in the same row to match the tallest one. Pair with d-flex flex-column on the card body and mt-auto on any footer element to pin buttons to the bottom.

Keep icon containers a fixed size with flex-shrink-0

In icon-left layouts, if the icon container is not marked flex-shrink-0, Bootstrap's flexbox rules will allow the icon to compress when text is long, breaking the visual rhythm. Set a fixed width and height via utility classes or a small custom rule, then add flex-shrink-0 to guarantee it never collapses.

Match gutter size to section density

Use g-4 (1.5 rem gap) for card-based feature grids with borders, and g-3 (1 rem) for denser icon-left grids. Avoid mixing gx-* and gy-* separately unless you have a deliberate reason, as inconsistent gutters make the grid feel misaligned on narrow viewports where columns stack.

Test equal-height behaviour at each breakpoint boundary

row-cols-sm-2 causes two cards to sit side by side between 576 px and 767 px. At exactly 576 px, a card with four lines of text next to one with two lines will create an uneven pair — verify this in DevTools. If the discrepancy is severe, consider setting a min-height on the card or trimming copy to keep descriptions to two lines maximum.

FAQ

Does Bootstrap 5 have an official feature grid component?

No. Bootstrap 5 provides no dedicated feature-grid component. You compose the pattern yourself using the grid system (row, col-*, row-cols-*), the card component, and flexbox and spacing utilities. This page documents exactly how to do that with copy-pasteable markup.

How do I make all feature cards the same height when text lengths differ?

Add h-100 to the card element and ensure the wrapping column participates in a flex row, which row-cols-* sets up automatically. If a card has a button or link at the bottom, add d-flex flex-column to the card-body and mt-auto to the button wrapper so it stays pinned to the bottom of every card regardless of content length.

How do I change the grid from three columns to four at large breakpoints?

Replace row-cols-lg-3 with row-cols-lg-4 on the row element. Bootstrap generates column classes for 1 through 6, so row-cols-xl-4 and row-cols-xxl-6 are also valid if you need different behaviour at wider breakpoints. Always keep row-cols-1 or row-cols-sm-2 as the mobile baseline so the grid stacks gracefully on small screens.

Can I use CSS Grid instead of Bootstrap's grid utilities for a feature grid?

Yes, but you would lose Bootstrap's responsive row-cols-* shorthand and would need to write custom media queries. If you do use CSS Grid, scope it to a custom class and leave the Bootstrap container in place for horizontal padding and max-width. The Bootstrap approach is generally simpler for standard 2-to-3-to-4 column feature layouts that need to work across many breakpoints without extra CSS.