Bootstrap 5 product cards are essential for e-commerce and marketplace layouts. This page covers 4 product card patterns — basic, grid, list view and featured — each ready for shop and template marketplace pages.
Key Classes Reference
| Class | What It Does |
|---|---|
.card | Product card wrapper |
.card-img-top | Product image |
.position-relative | Enables badge overlay |
.position-absolute | Positions sale badge |
.text-decoration-line-through | Strikethrough original price |
.h-100 | Equal height in grid |
.row-cols-md-3 | 3-column product grid |
1. Basic Bootstrap 5 Product Card
A standard product card with image, name, price, rating and add to cart button.
2. Bootstrap 5 Product Card Grid
Product cards in a responsive 3-column grid — 1 col on mobile, 2 on tablet, 3 on desktop.
3. Bootstrap 5 Product List View
Horizontal product card for list view — image left, details right.
4. Bootstrap 5 Featured Product Card
A larger featured product card with description, features list and dual action buttons.
Frequently Asked Questions
Use row row-cols-1 row-cols-md-3 g-4 on the wrapper and add h-100 to each card plus d-flex flex-column to card-body. Place the price/button div at the bottom with mt-auto on the element above it.
Add position-relative to the image wrapper div. Then add the badge with position-absolute top-0 start-0 m-2: <span class='badge bg-danger position-absolute top-0 start-0 m-2'>Sale</span>.
Add a CSS transition class: .product-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }. Apply product-card class to each card.
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.