Bootstrap 5

Bootstrap 5 Feature Grid

A Feature Grid is a Bootstrap 5 layout pattern that presents multiple product or service benefits in a structured multi-column grid, typically combining an icon or illustration with a short heading and description. It's used on marketing landing pages to communicate value propositions at a glance without requiring users to scroll through long prose. Use it when you need to highlight 3–12 discrete features or benefits in a scannable, visually balanced format.

Primary Class

.feature-grid

Common Use Cases

→SaaS product pages listing core platform capabilities (e.g., 'Real-time sync', 'Role-based access', 'API integrations') with icons and one-line descriptions
→Agency service pages breaking down individual offerings like branding, SEO, and paid media into equal-weight feature cards
→Mobile app landing pages showcasing platform features such as offline mode, push notifications, and biometric login in a 3-column grid above the fold
→E-commerce platform comparison sections that visually enumerate fulfilment, analytics, and storefront features to differentiate pricing tiers

Variants & Classes

Variant	Description	Classes
Feature Grid Default	Standard feature grid with Bootstrap's default styling.	`feature-grid`
Feature Grid Responsive	Responsive variant that adapts to different screen sizes.	`feature-grid feature-grid-responsive`

Code Example

<section class="py-5 bg-light">
  <div class="container">
    <div class="row text-center mb-5">
      <div class="col-lg-7 mx-auto">
        <h2 class="fw-bold">Everything your team needs to ship faster</h2>
        <p class="text-muted">Built for modern development workflows — from prototyping to production.</p>
      </div>
    </div>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="p-4 bg-white rounded-3 shadow-sm h-100">
          <div class="mb-3 text-primary fs-2"><i class="bi bi-lightning-charge-fill"></i></div>
          <h5 class="fw-semibold">Instant Deploys</h5>
          <p class="text-muted mb-0">Push to production in under 30 seconds with zero-downtime rolling deploys baked in by default.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-white rounded-3 shadow-sm h-100">
          <div class="mb-3 text-primary fs-2"><i class="bi bi-shield-lock-fill"></i></div>
          <h5 class="fw-semibold">Enterprise Security</h5>
          <p class="text-muted mb-0">SOC 2 Type II certified with SSO, audit logs, and granular role-based access control out of the box.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-white rounded-3 shadow-sm h-100">
          <div class="mb-3 text-primary fs-2"><i class="bi bi-bar-chart-fill"></i></div>
          <h5 class="fw-semibold">Live Analytics</h5>
          <p class="text-muted mb-0">Monitor request throughput, error rates, and latency in real time with customisable dashboards.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-white rounded-3 shadow-sm h-100">
          <div class="mb-3 text-primary fs-2"><i class="bi bi-puzzle-fill"></i></div>
          <h5 class="fw-semibold">Plugin Ecosystem</h5>
          <p class="text-muted mb-0">Connect to 200+ tools including GitHub, Slack, Datadog, and PagerDuty with one-click integrations.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-white rounded-3 shadow-sm h-100">
          <div class="mb-3 text-primary fs-2"><i class="bi bi-arrow-repeat"></i></div>
          <h5 class="fw-semibold">Auto Scaling</h5>
          <p class="text-muted mb-0">Traffic spikes are handled automatically — scale from 1 to 10,000 concurrent users without config changes.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-white rounded-3 shadow-sm h-100">
          <div class="mb-3 text-primary fs-2"><i class="bi bi-headset"></i></div>
          <h5 class="fw-semibold">24/7 Support</h5>
          <p class="text-muted mb-0">Dedicated engineers available around the clock via live chat, with a guaranteed 1-hour response SLA on all plans.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Live Examples

Basic Feature Grid

Example 1

Canvas Framework Variants

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

✓Canvas Builder generated feature grid with custom colours
✓Feature Grid with interactive states
✓Responsive feature grid for all screen sizes

Best Practices

Use h-100 on inner cards to equalise row heights

Adding `h-100` to each feature card's inner div ensures all cards in a row stretch to the same height regardless of content length — without writing a single line of custom CSS.

Keep feature descriptions under 20 words

Feature grids are scanned, not read — if a description runs beyond two lines it signals the copy belongs in a dedicated section; trim it to a single concrete outcome or capability statement.

Limit icon colour variety to one brand colour

Using a single accent colour (e.g., `text-primary`) across all icons creates visual cohesion; mixing multiple colours makes the grid feel noisy and reduces hierarchy clarity.

Switch to col-sm-6 col-lg-3 for 4-column layouts on wider screens

A 4-column grid at `col-md-3` collapses too aggressively on tablets; using `col-sm-6 col-lg-3` gives you a 2-column layout on mid-range screens before expanding to 4 at large breakpoints.

FAQ

How many features should a Feature Grid contain?

Three to six features is the sweet spot for most landing pages. Below three, the grid feels sparse and a simple two-column layout works better. Above nine, users stop reading individual items and the section loses persuasive impact. If you genuinely need to list more than nine, consider grouping them into labelled categories or using a tabbed interface to segment by use case or persona.

How do I remove the card-style box and use a minimal icon-above-text layout instead?

Drop the `bg-white`, `rounded-3`, and `shadow-sm` classes from the inner div, and just keep the column padding via `p-3` or the gutter spacing from `g-4` on the row. You get a clean, borderless feature grid that works well on coloured section backgrounds. If you want a subtle divider between items on mobile, add `border-bottom border-md-0 pb-4 pb-md-0` to each column.

How does Canvas Builder generate Feature Grid components?

When you describe a feature set in Canvas Builder, it automatically generates a fully structured Feature Grid using Bootstrap 5 grid classes, wires up your brand's primary colour to icon elements, and selects appropriate Bootstrap Icons based on the feature keywords you provide. The output is production-ready HTML — no placeholder text, no dummy icons — that matches the Canvas template's spacing and typography scale.