Bootstrap Cards
A card is a flexible content container with a border, some padding, and rounded corners. Cards are one of the most popular Bootstrap components because they can hold almost anything: headings, text, images, buttons, and lists. They are perfect for product tiles, blog previews, and profile boxes.
The anatomy of a card
Every card starts with a <div class="card">. Inside it, most of the content lives in a <div class="card-body">. Within the body you can use helper classes like .card-title for a heading and .card-text for a paragraph. The card body gives your content comfortable padding automatically.
A simple card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Welcome</h5>
<p class="card-text">This is a basic Bootstrap card with a title and some text.</p>
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Adding images
You can place an image at the top or bottom of a card. Use .card-img-top for an image above the body, or .card-img-bottom for one below it. The image stretches to the full width of the card and keeps its rounded corners aligned with the card.
A card with an image on top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="card" style="width: 18rem;">
<img src="photo.jpg" class="card-img-top" alt="A scenic view">
<div class="card-body">
<h5 class="card-title">Mountain Trip</h5>
<p class="card-text">A short description of the adventure goes here.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Headers and footers
Cards can have an optional header and footer using .card-header and .card-footer. These are great for titles, categories, or a line of meta information like "Last updated 3 mins ago".
A card with a header and footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="card" style="width: 18rem;">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in.</p>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Coloring and layout
- Add a background color with .text-bg-primary, .text-bg-success, and similar classes for a colored card with readable text.
- Use .border-danger or other .border-* classes to color just the border.
- Wrap several cards in a .row and place each in a column to build a responsive card grid.
- Use .card-group to join cards together with no gaps between them.
A colored card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="card text-bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Order status</div>
<div class="card-body">
<h5 class="card-title">Shipped</h5>
<p class="card-text">Your package is on the way and arrives tomorrow.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Common card classes
Exercise: Bootstrap Cards
Which class is the core container needed to build a Bootstrap 5 card?
