Bootstrap 5 Feature Section
A feature section showcases the key benefits or capabilities of a product or service. In Bootstrap 5, feature sections are built using the grid system combined with icons, cards, or alternating image-text rows. They're one of the most common sections on landing pages and product sites.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- Product feature highlights on landing pages
- Service offering breakdowns
- 'Why us' sections
- Benefit lists for SaaS products
- How-it-works steps
Variants and classes
| Variant | Description and classes |
|---|---|
| 3-column icon grid | Three columns, each with an icon, heading, and description.row row-cols-1 row-cols-md-3 g-4 |
| Alternating image-text rows | Full-width sections alternating between image-left and image-right.row align-items-center + col-lg-6 + flex-lg-row-reverse |
| Numbered steps | Features presented as numbered steps in a process.d-flex gap-3 + display-6 fw-bold |
| Icon list features | Compact list with small icon per feature.list-unstyled + d-flex align-items-start gap-3 |
Code example
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold display-6">Everything you need to ship faster</h2>
<p class="text-muted lead">Three powerful modes. One clean workflow.</p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="d-flex flex-column align-items-start p-4 bg-white rounded-3 shadow-sm h-100">
<div class="bg-primary bg-opacity-10 text-primary rounded-2 p-2 mb-3 fs-4">⚡</div>
<h5 class="fw-bold">Full Page Generation</h5>
<p class="text-muted small mb-0">Describe any website. Get a complete multi-page HTML site in 5 to 10 minutes.</p>
</div>
</div>
<div class="col">
<div class="d-flex flex-column align-items-start p-4 bg-white rounded-3 shadow-sm h-100">
<div class="bg-success bg-opacity-10 text-success rounded-2 p-2 mb-3 fs-4">✏️</div>
<h5 class="fw-bold">Edit Mode</h5>
<p class="text-muted small mb-0">Modify any Canvas template with natural language. No code editor needed.</p>
</div>
</div>
<div class="col">
<div class="d-flex flex-column align-items-start p-4 bg-white rounded-3 shadow-sm h-100">
<div class="bg-warning bg-opacity-10 text-warning rounded-2 p-2 mb-3 fs-4">📦</div>
<h5 class="fw-bold">Block Generation</h5>
<p class="text-muted small mb-0">Generate single components to drop into any existing project.</p>
</div>
</div>
</div>
</div>
</section>Live examples
3-Column Icon Features
Standard feature grid with icons, titles, and descriptions.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Alternating left/right image-text feature rows
- Feature list with animated counter numbers
- Tabbed feature showcase
- Dark feature section with glow icons
- Timeline-style feature steps
Best practices
Lead features with user benefits, not product specs
Don't say 'Bootstrap 5 grid system'. Say 'Responsive layouts that work on every device, built automatically'. Features should answer 'what does this do for me?' not 'what is this?'
Limit to 3 to 6 features per section
More than 6 features in a single grid section causes cognitive overload. If you have more, split into multiple sections by theme or use tabbed features.