Bootstrap 5 Card Example

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

Class	What It Does
`.card`	Required wrapper element
`.card-body`	Main content padding area
`.card-title`	Heading inside card body
`.card-text`	Paragraph text inside card body
`.card-img-top`	Image at the top of the card
`.card-img-bottom`	Image at the bottom of the card
`.card-header`	Styled header section
`.card-footer`	Styled footer section
`.card-link`	Link inside card body
`.h-100`	Makes cards equal height in a grid
`.stretched-link`	Makes entire card clickable
`.row-cols-md-3`	3-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

How do I make Bootstrap 5 cards equal height?▲

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.

How do I add a hover effect to a Bootstrap 5 card?▼

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.

How do I make Bootstrap 5 cards clickable?▼

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.

How do I create a Bootstrap 5 card grid?▼

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.

How do I put an image inside a Bootstrap 5 card?▼

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 →