Bootstrap 5 horizontal cards display content side by side — image and text in a row. This page covers 4 horizontal patterns — basic card, media object, product list and profile list — each ready to copy.
Key Classes Reference
| Class | What It Does |
|---|---|
.row.g-0 | No-gutter row inside card |
.col-4 | Image column width |
.col-8 | Content column width |
.rounded-start | Rounds left corners on image |
.h-100 | Image fills full card height |
object-fit:cover | Image crops without distortion |
.flex-shrink-0 | Prevents image shrinking |
1. Basic Bootstrap 5 Horizontal Card
Image on the left, content on the right using Bootstrap row g-0 inside the card.
2. Bootstrap 5 Media Object (Horizontal)
The Bootstrap 5 replacement for the old media object component using d-flex and gap.
3. Bootstrap 5 Horizontal Product Card
Product list item with thumbnail, details and action button in a horizontal layout.
4. Bootstrap 5 Horizontal Profile Card
Compact horizontal profile card for user lists and admin tables.
Frequently Asked Questions
Use row g-0 inside the card element. Add col-4 or col-sm-4 for the image column and col-8 or col-sm-8 for the content column. Use img-fluid rounded-start on the image and object-fit-cover with h-100 to fill the image column height.
Bootstrap 5 removed the media object component. Replace it with d-flex gap-3: <div class='d-flex gap-3'><img class='flex-shrink-0'><div>content</div></div>. The flex-shrink-0 on the image prevents it from shrinking when content is long.
Add h-100 and object-fit-cover to the image: <img class='img-fluid rounded-start h-100' style='object-fit:cover'>. Also add overflow-hidden to the card to prevent image overflow at corners.
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.