Bootstrap 5Content

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.

Primary Class

.related-posts

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 & Classes

Variant	Description	Classes
Related Posts Default	Standard related posts with Bootstrap's default styling.	`related-posts`
Related Posts Responsive	Responsive variant that adapts to different screen sizes.	`related-posts related-posts-responsive`

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 src="/images/css-grid-guide.jpg" 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 &middot; 8 min read</p>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <img src="/images/flexbox-tips.jpg" 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 &middot; 6 min read</p>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <img src="/images/responsive-typography.jpg" 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 &middot; 5 min read</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

Live Examples

Basic Related Posts

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 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?

Wrap your `.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?

Rather than overriding Bootstrap's `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.

How does CanvasBuilder generate a Related Posts component?

CanvasBuilder reads your prompt, content category, and any brand colour input you provide, then outputs a fully structured Related Posts section using Bootstrap 5 card grid markup. It applies your brand's primary colour to badge elements, sets correct responsive column breakpoints, includes semantic heading hierarchy (h2 for the section, h3 for card titles), and writes descriptive alt text on image elements. The generated HTML is production-ready and does not depend on any JavaScript to render.