Card
1. Introduction to This Lesson
(1) Prerequisites
- Lesson 09: Buttons and Button Groups
(2) 🎯 What You Will Learn
- Build the basic structure of a card (image, body, title, text)
- Use card-header and card-footer to add a top and bottom
- Use card-img-overlay for image text overlays
- Use text-bg-* and border-* to control card colors
- Use card-group and the grid system to create card layouts
(3) The Problem
Bob's product listing page needs to display 6 products—each with an image, name, price, and an "Add to Cart" button. Using Bootstrap's card component and grid system, this can be done in just over ten lines of code.
(4) The Solution
The card is the most core content container in Bootstrap 5. It can combine images, text, buttons, and lists into a single, independent content unit. It's widely used for product displays, article previews, and user profile cards.
How to Think About It: A card is like a magic display box—internally, you can place any combination of images, text, lists, and buttons, while externally it maintains a unified appearance (rounded corners, shadows, borders).
(5) The Benefits
Using the Bootstrap card component together with the grid system, you can build a professional and aesthetically pleasing product display page in just over ten lines of code.
2. Basic Card Structure
▶ Example: Basic Card
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/286x180/0d6efd/fff" class="card-img-top" alt="Placeholder">
<div class="card-body">
<h5 class="card-title">Product Name</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">$29.99</h6>
<p class="card-text">A great product that solves real problems for everyday users.</p>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
<hr>
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special Offer</h5>
<p class="card-text">With supporting text below as a natural lead-in.</p>
<a href="#" class="btn btn-success">Claim Offer</a>
</div>
<div class="card-footer text-body-secondary">2 days remaining</div>
</div>
<hr>
<div class="card" style="width: 18rem;">
<div class="card-header">Notifications</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">New message from Alice</li>
<li class="list-group-item">Server update completed</li>
<li class="list-group-item">Payment received: $120</li>
</ul>
</div>
</div>
</body>
</html>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
3. Card Structure Explained
| Element | class | Description |
|---|---|---|
| Container | card |
Declares the card component, providing borders, rounded corners, and shadow. |
| Image | card-img-top |
Top image of the card (responsive width). |
| Body | card-body |
Padded container for placing text and buttons. |
| Title | card-title |
Card title (h5 font size). |
| Subtitle | card-subtitle |
Secondary text below the title. |
| Text | card-text |
Body paragraph (comes with margin-bottom). |
| Link | card-link |
A link inside the card (blue text). |
| Header | card-header |
Top bar of the card. |
| Footer | card-footer |
Bottom bar of the card. |
| Image Overlay | card-img-overlay |
Text overlaid on top of an image. |
(1) Image Overlay
HTML
<div class="card text-white">
<img src="https://via.placeholder.com/400x200/198754/fff" class="card-img" alt="Background">
<div class="card-img-overlay">
<h5 class="card-title">Overlay Title</h5>
<p class="card-text">Text is placed on top of the image.</p>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
4. Card Colors and Backgrounds
HTML
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card</h5>
<p class="card-text">Full background color using text-bg-* class.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Danger border</div>
<div class="card-body">
<h5 class="card-title">Border only card</h5>
<p class="card-text">Only the border gets the color.</p>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
| class | Effect |
|---|---|
text-bg-primary / text-bg-dark |
Full-color background + white text |
bg-light / bg-dark |
Custom background color |
border-primary / border-danger |
Border color only |
5. Horizontal Card
HTML
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://via.placeholder.com/200x200/0d6efd/fff" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Horizontal Card</h5>
<p class="card-text">This card uses row + col to place image and text side by side.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
6. Card Group
HTML
<div class="card-group">
<div class="card">
<img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This card has less content.</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x180/198754/fff" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This card has more content. Cards auto-match height.</p>
<p class="card-text">Additional paragraph to show height matching.</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Short content again.</p>
</div>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
(1) Card Grid (Recommended)
HTML
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Content here.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">More content here.</p>
</div>
</div>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
| Layout Method | Features | Use Case |
|---|---|---|
card-group |
No gap, equal height | Detail pages, side-by-side features |
row-cols-* + h-100 |
Has gap, equal height | Product/article lists |
Standard row + col-* |
Unequal height | Information display |
7. More Card Examples
▶ Example: E-commerce Product Card
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Product Card</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200/0d6efd/fff" class="card-img-top" alt="Product">
<div class="card-body">
<h5 class="card-title">Wireless Headphones</h5>
<p class="card-text text-muted">Noise-cancelling, 30hr battery life.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">$79.99</span>
<span class="badge bg-success rounded-pill">In Stock</span>
</div>
</div>
<div class="card-footer bg-transparent">
<button class="btn btn-primary w-100">Add to Cart</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200/198754/fff" class="card-img-top" alt="Product">
<div class="card-body">
<h5 class="card-title">Smart Watch</h5>
<p class="card-text text-muted">Fitness tracker with heart-rate monitor.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">$199.99</span>
<span class="badge bg-warning rounded-pill">Low Stock</span>
</div>
</div>
<div class="card-footer bg-transparent">
<button class="btn btn-primary w-100">Add to Cart</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200/dc3545/fff" class="card-img-top" alt="Product">
<div class="card-body">
<h5 class="card-title">Bluetooth Speaker</h5>
<p class="card-text text-muted">Portable, waterproof, 12hr playback.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">$49.99</span>
<span class="badge bg-danger rounded-pill">Sold Out</span>
</div>
</div>
<div class="card-footer bg-transparent">
<button class="btn btn-secondary w-100" disabled>Out of Stock</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
▶ Example: User Profile Card (Image Overlay)
HTML
<div class="card text-white border-0" style="width: 20rem;">
<img src="https://via.placeholder.com/320x200/6f42c1/fff" class="card-img rounded-3" alt="Cover">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title">Alice Chen</h5>
<p class="card-text">Senior UI Designer at TechCorp</p>
<div>
<span class="badge bg-primary rounded-pill">12 Projects</span>
<span class="badge bg-success rounded-pill">98% Rating</span>
</div>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
▶ Example: Card Group Pricing Table
HTML
<div class="card-group text-center">
<div class="card border-primary">
<div class="card-header bg-primary text-white">Basic</div>
<div class="card-body">
<h3 class="card-title">$9<span class="text-muted fs-6">/mo</span></h3>
<ul class="list-unstyled mt-3 mb-4">
<li>10 GB Storage</li>
<li>1 User</li>
<li>Email Support</li>
</ul>
<button class="btn btn-outline-primary">Choose Plan</button>
</div>
</div>
<div class="card border-success">
<div class="card-header bg-success text-white">Pro</div>
<div class="card-body">
<h3 class="card-title">$29<span class="text-muted fs-6">/mo</span></h3>
<ul class="list-unstyled mt-3 mb-4">
<li>100 GB Storage</li>
<li>5 Users</li>
<li>Priority Support</li>
</ul>
<button class="btn btn-success">Choose Plan</button>
</div>
</div>
<div class="card border-warning">
<div class="card-header bg-warning text-white">Enterprise</div>
<div class="card-body">
<h3 class="card-title">$99<span class="text-muted fs-6">/mo</span></h3>
<ul class="list-unstyled mt-3 mb-4">
<li>Unlimited Storage</li>
<li>Unlimited Users</li>
<li>24/7 Support</li>
</ul>
<button class="btn btn-warning">Choose Plan</button>
</div>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
▶ Example: Horizontal Icon Card
HTML
<div class="card mb-3" style="max-width: 500px;">
<div class="row g-0 align-items-center">
<div class="col-md-3 text-center p-3">
<div class="display-6 text-primary">🔒</div>
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">Secure Payment</h5>
<p class="card-text">All transactions are encrypted with SSL 256-bit security.</p>
</div>
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 500px;">
<div class="row g-0 align-items-center">
<div class="col-md-3 text-center p-3">
<div class="display-6 text-success">🚚</div>
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">Free Shipping</h5>
<p class="card-text">Free delivery on orders over $50, arrives within 3-5 days.</p>
</div>
</div>
</div>
</div>
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
(1) Card Component Structure
flowchart TD
A[card container] --> B[card-img-top<br/>Image]
A --> C[card-body Body]
A --> D[card-header<br/>Header]
A --> E[card-footer<br/>Footer]
C --> F[card-title Title]
C --> G[card-subtitle Subtitle]
C --> H[card-text Text]
C --> I[card-link Link]
A --> J[card-img-overlay<br/>Image Overlay Text]
A --> K[list-group List Group]
Output: Components styled by Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
| Card Variant | class | Effect Description |
|---|---|---|
| Full-color background | text-bg-primary/dark |
Background and text change color together |
| Border only | border-primary/danger |
White background retained, border colored |
| Transparent background | bg-transparent |
No background color, suitable for dark mode |
| No border | border-0 |
Completely removes the border |
| Layout Method | Gap | Equal Height | Suitable Scenario |
|---|---|---|---|
card-group |
No | Yes | Detail pages, feature comparison |
row-cols-* + h-100 |
Yes | Yes | Product lists, blogs |
row-cols-* without h-100 |
Yes | No | Content with varying heights |
| Combined Content | class | Common Use Cases |
|---|---|---|
| Image + Text + Button | card-img-top + card-body |
Product display |
| Header + Body + Footer | card-header + card-body + card-footer |
Messages, announcements |
| Image Overlay | card-img-overlay |
Covers, banners |
| Icon + Horizontal Layout | row g-0 + col-* |
Feature lists, services |
| List Group | list-group list-group-flush |
Notifications, menus |
❓ Frequently Asked Questions
Q Is the card's width fixed or adaptive?
A The card is
width: 100% by default (fills the parent container). You can use style="width: 18rem;" to fix the width, or place it inside a grid column to adapt automatically.Q How can I arrange different areas inside a card separately?
A You can use Flexbox utility classes inside the card. For example, to push a button in
.card-body to the bottom, use mt-auto to push it to the card's bottom.Q Does the card support dark mode?
A Yes. Bootstrap 5.3 cards automatically respond to
data-bs-theme="dark", and text and background colors will switch automatically.Q How does a card-group display on small screens?
A On small screens, cards in a
card-group stack vertically, each card taking the full container width, while maintaining equal height. If equal height is not needed, using a grid row-cols-* is recommended.Q Can I place a complete list group inside a card?
A Yes. You can directly place
list-group list-group-flush inside the card. In this case, the list group will sit flush against the card's padding, creating a unified visual effect.📖 Summary
- Card structure:
card>card-img-top+card-body(card-title / card-text / card-link) card-header/card-footeradd top/bottom bars,card-img-overlayfor image text overlaytext-bg-*for full-color background cards,border-*for border coloring onlycard-groupfor no-gap equal height,row-cols-*+h-100for equal height grid with gaps
📝 Assignment
- ⭐ Create a product card grid: 1 column on mobile, 2 on tablet, 3 on desktop. Each card should have an image + title + price + description + button. Use
mt-autoto fix the button to the bottom. - ⭐⭐ Create a user profile card: left-side avatar (horizontal image) + right-side name + bio + social links. The card should have a
border-primaryblue border. - ⭐⭐⭐ Use
card-groupto create three feature introduction cards, each with an icon area + title + description. The three cards should automatically be equal in height.
Previous Lesson: Buttons and Button Groups · Next Lesson: List Groups and Badges
