Bootstrap 5 Related Posts
A Related Posts component in Bootstrap 5 displays a curated grid or list of additional articles, blog posts, or content items that are contextually relevant to the page a user is currently reading. It is typically placed at the bottom of a blog post or article page and uses Bootstrap's card grid system to present post thumbnails, titles, categories, and publish dates. Use it to reduce bounce rate, increase session depth, and guide readers toward related content they are likely to find valuable.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- Displaying three thematically similar blog articles at the bottom of a tutorial post to keep readers engaged with a coding or design publication
- Showing related product guides or buying advice articles beneath a product review on an e-commerce or affiliate site
- Surfacing related case studies or portfolio entries on an agency website after a visitor finishes reading one project write-up
- Recommending further reading on a documentation or knowledge base site where users benefit from seeing adjacent topics after completing one article
Variants and classes
| Variant | Description and classes |
|---|---|
| Card grid | Three posts per row on desktop.row g-4 + col-md-4 + card h-100 |
| Whole card clickable | The title link covers the card.stretched-link |
| Category badge | Topic label above the title.badge text-bg-primary |
| Compact list | Text-only list for sidebars.list-group list-group-flush |
Code example
<section class="py-5 bg-light">
<div class="container">
<h2 class="h4 fw-semibold mb-4">Related Posts</h2>
<div class="row g-4">
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<img width="600" height="340" src="https://picsum.photos/seed/cb-post-1/600/340" class="card-img-top" alt="A visual guide to CSS Grid layout">
<div class="card-body">
<span class="badge bg-primary mb-2">CSS</span>
<h3 class="card-title h6 fw-semibold">
<a href="/blog/css-grid-layout-guide" class="text-dark text-decoration-none stretched-link">
A Complete Guide to CSS Grid Layout
</a>
</h3>
<p class="card-text small text-muted">12 May 2025 · 8 min read</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<img width="600" height="340" src="https://picsum.photos/seed/cb-post-2/600/340" class="card-img-top" alt="Practical Flexbox tips for developers">
<div class="card-body">
<span class="badge bg-success mb-2">Layout</span>
<h3 class="card-title h6 fw-semibold">
<a href="/blog/flexbox-tips-for-developers" class="text-dark text-decoration-none stretched-link">
10 Practical Flexbox Tips Every Developer Should Know
</a>
</h3>
<p class="card-text small text-muted">3 April 2025 · 6 min read</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<img width="600" height="340" src="https://picsum.photos/seed/cb-post-3/600/340" class="card-img-top" alt="Responsive typography techniques">
<div class="card-body">
<span class="badge bg-warning text-dark mb-2">Typography</span>
<h3 class="card-title h6 fw-semibold">
<a href="/blog/responsive-typography-techniques" class="text-dark text-decoration-none stretched-link">
Responsive Typography: Scaling Text the Right Way
</a>
</h3>
<p class="card-text small text-muted">18 March 2025 · 5 min read</p>
</div>
</div>
</div>
</div>
</div>
</section>Live examples
Basic Related Posts
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:
- Canvas Builder generated related posts with custom colours
- Related Posts with interactive states
- Responsive related posts for all screen sizes
Best practices
Use stretched-link to make the entire card clickable
Add the Bootstrap utility class stretched-link to the anchor tag inside your card and set the card itself to position: relative (Bootstrap cards already are). This expands the clickable hit area across the whole card without wrapping the image and title in separate links.
Set h-100 on every card to equalise heights in a row
When post titles vary in length, some cards will be taller than others. Adding h-100 to the .card element inside each column forces all cards in a row to stretch to the tallest item, giving the grid a consistent, polished appearance.
Use card-img-top with a fixed aspect ratio to prevent layout shifts
Wrap your thumbnail image in a ratio ratio-16x9 div before the .card-body to enforce a consistent image proportion across all cards, regardless of the source image dimensions. This also prevents cumulative layout shift (CLS), which affects Core Web Vitals scores.
Limit the section to three posts for optimal cognitive load
Research on recommendation fatigue suggests three items is the sweet spot for related content widgets. More than four options tends to paralyse decision-making, while fewer than three underutilises the section's potential to extend reading sessions.
FAQ
How do I make Related Posts display as a horizontal scrolling list on mobile instead of stacking?
.row in a container with overflow-x: auto and add flex-nowrap to the row itself on small screens using flex-nowrap or a media query. Set each column to a fixed width such as col-9 col-sm-6 col-md-4 so three cards are visible on desktop but only one-and-a-half are visible on mobile, giving a visual cue that users can scroll horizontally. Add -webkit-overflow-scrolling: touch in your CSS for smooth inertia scrolling on iOS devices.How can I customise the category badge colours to match my brand without overriding Bootstrap globally?
bg-primary globally, define custom utility classes in your stylesheet using the pattern .bg-brand-editorial { background-color: #2D6A4F !important; } and apply them directly to the badge element. Alternatively, use Bootstrap 5's CSS custom properties: override --bs-primary at the component scope with a scoped selector like .related-posts .badge { --bs-primary: #2D6A4F; } so the change only affects badges inside your Related Posts section.