Bootstrap 5 blog cards present articles and posts in a clean visual format. This page covers 4 blog card patterns — basic, horizontal, grid and featured overlay — each ready for blog and content pages.
Key Classes Reference
| Class | What It Does |
|---|---|
.card | Blog card wrapper |
.card-img-top | Post thumbnail |
.card-img-overlay | Content overlay on image |
.h-100 | Equal height in grid |
.row-cols-md-3 | 3-column blog grid |
.flex-grow-1 | Pushes footer to bottom |
1. Basic Bootstrap 5 Blog Card
A standard blog post card with image, category badge, title, excerpt and author.
2. Bootstrap 5 Horizontal Blog Card
A horizontal blog card — image left, content right. Great for list-style blog layouts.
3. Bootstrap 5 Blog Card Grid
A 3-column blog grid with consistent card heights using h-100 and d-flex flex-column.
4. Bootstrap 5 Featured Blog Post Card
A large featured post card with overlay text on a background image.
Frequently Asked Questions
Use row-cols-md-3 on the row and add h-100 to each card. Inside the card-body use d-flex flex-column and add flex-grow-1 to the excerpt paragraph. This pushes the footer content to the bottom regardless of text length.
Add a span with badge class before the title: <span class='badge bg-primary mb-2'>Category</span>. For a custom color use inline style: style='background:#fd4766'. Use align-self-start in a flex column layout to prevent the badge from stretching full width.
Use card-img on the image and card-img-overlay on the content div. The overlay sits on top of the image. Add a gradient background to the overlay div for readable text: style='background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%)'.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.