How do I design a blog layout with cards, meta, and sticky sidebar?
Asked on Aug 20, 2025
1 Answer
To design a blog layout with cards, meta information, and a sticky sidebar using Bootstrap 5, you can utilize the grid system and card components. Here's a simple example to get you started.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Blog Post Title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text"><small class="text-muted">Posted on January 1, 2023</small></p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Another Blog Post</h5>
<p class="card-text">More example text to illustrate the card layout in a blog format.</p>
<p class="card-text"><small class="text-muted">Posted on February 2, 2023</small></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="sticky-top" style="top: 20px;">
<div class="card">
<div class="card-body">
<h5 class="card-title">Sidebar</h5>
<p class="card-text">Additional content or links can go here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The layout uses Bootstrap's grid system with `col-md-8` for the main content and `col-md-4` for the sidebar.
- Each blog post is represented as a Bootstrap card with a title, text, and meta information.
- The sidebar is made sticky using Bootstrap's `sticky-top` class, which keeps it visible as you scroll.
- Adjust the `top` value in the `sticky-top` style to control the offset from the top of the viewport.