Bootstrap Cards
A card is a box with a border and padding that groups related content, such as a product, a course or a profile.
A Basic Card
A card has the class card, and its content goes inside card-body.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<div class="card" style="max-width: 20rem;">
<div class="card-body">
<h5 class="card-title">Graphic Design</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">3 months</h6>
<p class="card-text">Learn Photoshop, Illustrator and logo design with real client projects.</p>
<a href="#" class="btn btn-primary">View course</a>
<a href="#" class="card-link">Ask a question</a>
</div>
</div>
</body>
</html>Card Parts
| Class | What it is |
|---|---|
card | The outer box |
card-body | The padded content area |
card-title, card-subtitle | Headings inside the card |
card-text | Paragraph text |
card-link | A link that sits nicely next to other card links |
card-header, card-footer | A shaded strip at the top or bottom |
card-img-top | An image at the top edge of the card |
Header, Footer and Image
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<div class="card text-center" style="max-width: 22rem;">
<div class="card-header fw-semibold">Best Seller</div>
<div class="bg-primary-subtle" style="height: 140px;"></div>
<div class="card-body">
<h5 class="card-title">Wireless Headphones</h5>
<p class="card-text fs-4 fw-bold text-success">Rs 3,999</p>
<a href="#" class="btn btn-success w-100">Add to cart</a>
</div>
<div class="card-footer text-body-secondary">Free delivery in Karachi</div>
</div>
</body>
</html>The coloured box stands in for a product photo. With a real image you would write <img src="headphones.jpg" class="card-img-top" alt="Wireless headphones">.
Cards in a Grid
Put cards inside grid columns to show several in a row. h-100 on each card makes all cards in a row the same height, even if their text is different lengths.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Web Development</h5>
<p class="card-text">HTML, CSS, JavaScript and Bootstrap.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Digital Marketing</h5>
<p class="card-text">Facebook ads, Google ads, content planning and reports for small businesses.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Freelancing</h5>
<p class="card-text">Find your first clients online.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>On phones the cards stack; from 768px they sit three in a row.
Card Colours
Use text-bg-* on the card for a coloured card, or border-* for a coloured border:
Example
<div class="card text-bg-dark">...</div>
<div class="card border-success">...</div>Keep a card about one thing. If a card has many buttons and long text, split it into two cards or a separate page.
Exercise
Exercise
Which class should hold the main padded content of a card?