Bootstrap 5 Split Content Section
A Split Content Section divides a page row into two distinct columns, pairing text or headings on one side with an image, video, or secondary content block on the other. It creates visual balance and guides the reader through information in a structured, left-right layout. Use it for feature explanations, product highlights, about sections, and any content that benefits from a direct image-to-text relationship.
Primary Class
.row .col-md-6Common Use Cases
- →A SaaS product page showing a dashboard screenshot alongside a bullet list of core features, letting prospects visually confirm what the copy describes.
- →An e-commerce brand story section pairing a founder photograph with a short origin paragraph and a link to the full about page.
- →A services page where each service block alternates text-left and image-right to create rhythm and prevent the page from feeling monotonous.
- →A nonprofit landing page placing donation impact statistics on the left and an emotional photograph of beneficiaries on the right to reinforce the call to action.
Variants & Classes
| Variant | Description |
|---|---|
| Image Left, Text Right | Places a full-height or auto-height image in the left column and a text block with heading, body copy, and optional CTA in the right column. |
| Text Left, Image Right | Mirrors the default layout so the text column leads and the image follows, which suits left-to-right reading flow for introductory content. |
| Equal Split with Background Color | Applies contrasting background colours to each column using utility classes to create a bold two-tone visual split. |
| Asymmetric Split (2/3 + 1/3) | Uses unequal column widths to give the primary content more visual weight while the secondary element acts as a supporting accent. |
| Stacked on Mobile | Collapses the two columns into a single vertical stack on small screens using responsive column classes, preserving readability on phones. |
| Vertically Centered Split | Centres content vertically within each column so neither side appears misaligned when one side is taller than the other. |
Code Example
<section class="py-5">
<div class="container">
<div class="row align-items-center g-5">
<!-- Image column -->
<div class="col-12 col-md-6">
<img
src="/assets/img/dashboard-preview.png"
alt="Product dashboard showing real-time analytics"
class="img-fluid rounded shadow-sm"
/>
</div>
<!-- Text column -->
<div class="col-12 col-md-6">
<span class="text-primary fw-semibold text-uppercase small">Analytics</span>
<h2 class="mt-2 mb-3 fw-bold">Understand your data in real time</h2>
<p class="text-secondary mb-4">
Our dashboard consolidates every metric your team tracks into a single
view. No more switching between tools or waiting for Monday reports.
</p>
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i>Live data refresh every 30 seconds</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i>Custom KPI widgets per team</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i>CSV and API export included on all plans</li>
</ul>
<a href="/features" class="btn btn-primary px-4">Explore features</a>
</div>
</div>
</div>
</section>Live Examples
Basic Split Content Section
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder renders split sections with brand-matched heading colours and button styles automatically applied to the text column, keeping the output consistent with the site's colour scheme without manual overrides.
- ✓When a full-bleed image option is selected, Canvas Builder outputs a column with a CSS background-image and cover sizing rather than an img tag, giving a flush edge-to-edge effect that plain Bootstrap columns do not produce by default.
- ✓Canvas Builder adds a responsive order swap by default on asymmetric splits, ensuring the image always appears below the text on mobile rather than above it, which preserves the narrative flow the layout was designed for.
Best Practices
Alternate the layout direction between sections
Add the Bootstrap order utilities (order-md-1 and order-md-2) on every other split section so the image and text sides swap. This creates a natural zigzag rhythm that keeps users reading down the page instead of skimming past repeated patterns.
Use g-0 instead of gutter classes for full-bleed splits
When you want columns to sit flush against each other with no gap, apply g-0 to the row and handle inner spacing with padding utilities on the columns themselves. This avoids the unwanted gap that default gutters produce in tight two-tone layouts.
Set a min-height on image columns that use background-image
If you replace the img tag with a CSS background-image on the column, add a min-height (such as min-height: 400px) so the column does not collapse to zero height on mobile when it stacks below the text column.
Control vertical alignment explicitly with align-items
Use align-items-center on the row for equal-height appearance, or align-items-start when the image column is deliberately taller and you want the text to read from the top rather than floating in the middle.