Bootstrap 5 cards are flexible content containers used for blog posts, products, profiles, pricing tables and more. This page covers 8 practical card patterns with working copy-paste HTML code.

Quick Setup

Cards require only Bootstrap 5 CSS — no extra JS needed:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

ClassWhat It Does
.cardRequired wrapper element
.card-bodyMain content padding area
.card-titleHeading inside card body
.card-textParagraph text inside card body
.card-img-topImage at the top of the card
.card-img-bottomImage at the bottom of the card
.card-headerStyled header section
.card-footerStyled footer section
.card-linkLink inside card body
.h-100Makes cards equal height in a grid
.stretched-linkMakes entire card clickable
.row-cols-md-33-column card grid on desktop

1. Basic Bootstrap 5 Card

The simplest Bootstrap 5 card with header, body, title, text and a button.

2. Bootstrap 5 Card with Image

Card with a top image using card-img-top. Image fills the card width automatically.

3. Bootstrap 5 Pricing Card

A clean pricing card with plan name, price, feature list and CTA button.

4. Bootstrap 5 Profile Card

A user profile card with avatar, name, role, stats and social links.

5. Bootstrap 5 Product Card

An e-commerce product card with image, badge, price, rating and add to cart button.

6. Bootstrap 5 Blog Card

A blog post card with category badge, image, title, excerpt, author and read time.

7. Bootstrap 5 Card Hover Effect

Card with a smooth shadow and lift effect on hover using CSS transitions.

8. Bootstrap 5 Horizontal Card

A horizontal card with image on the left and content on the right using Bootstrap grid inside the card.

Frequently Asked Questions

Add h-100 class to each card and wrap them in a row with d-flex: <div class='row row-cols-1 row-cols-md-3 g-4'>. Each col gets <div class='col'> and the card gets class='card h-100'. Bootstrap flexbox handles equal heights automatically.
Bootstrap 5 doesn't include a built-in hover effect. Add custom CSS: .card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }. Apply card-hover class to your card element.
Wrap the entire card in an anchor tag, or use a stretched-link on the card title: <a href='#' class='stretched-link'>Card Title</a>. The stretched-link class extends the link's click area to cover the entire card using CSS ::after pseudo-element.
Use row-cols utility classes: <div class='row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4'>. This creates 1 column on mobile, 2 on tablet, 3 on desktop. Add h-100 to each card for equal heights.
Use card-img-top for image at the top, card-img-bottom for image at the bottom, or card-img for a background image overlay. For a horizontal card, use row g-0 inside the card with col for image and col for content.

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.

Related Components