Cards
A card is a block with a border, rounded corners and padding that holds related content: a pricing plan, a product, an article, a stat. It is probably the most used Bootstrap component: on the landing page cards make up the pricing plans, in the admin dashboard — the number blocks.
A simple card
A card is card, inside it card-body, and in that a card-title heading and card-text:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card" style="max-width: 18rem">
<div class="card-body">
<h5 class="card-title">Deadlines</h5>
<p class="card-text">Tasko reminds you a day before the due date so nothing gets lost.</p>
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>A white bordered block with a heading, text and a button. The width is limited by the max-width style here, and by a grid column in a real layout.
Image, header and footer
| Class | Card part |
|---|---|
card-img-top | Image on top, with rounded top corners |
card-header | Gray header strip |
card-footer | Gray footer strip |
card-subtitle | Subtitle |
list-group list-group-flush | A list of items inside the card |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card text-center" style="max-width: 18rem">
<div class="card-header">Team</div>
<div class="card-body">
<h5 class="card-title display-6">$9</h5>
<p class="card-text text-body-secondary">per user per month</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Up to 50 members</li>
<li class="list-group-item">Project reports</li>
</ul>
<div class="card-footer">
<button type="button" class="btn btn-primary w-100">Choose</button>
</div>
</div>A finished pricing card: a header with the plan name, a big price, a list of features and a button in the footer.
A row of cards
Cards are laid out with the grid: each one in its own column. The h-100 class stretches a card to the full column height, so the row looks even even when the texts differ in length:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="row row-cols-1 row-cols-sm-2 g-3">
<div class="col">
<div class="card h-100">
<img src="/media/photo-400x250.jpg" class="card-img-top" alt="A team at work">
<div class="card-body">
<h5 class="card-title">Shared lists</h5>
<p class="card-text">The whole team sees the same tasks.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="/media/photo-400x250.jpg" class="card-img-top" alt="A report on screen">
<div class="card-body">
<h5 class="card-title">Reports</h5>
<p class="card-text">How many tasks were closed this week and by whom — in one window, without spreadsheets or manual counting.</p>
</div>
</div>
</div>
</div>Two cards with images and the same height, although the second has longer text.
A stat card
In the admin dashboard a card often holds a single number: a card-body with a text-body-secondary small label and an fs-3 fw-bold number. Four such cards in a row-cols-lg-4 row make the top strip of the dashboard.
Common mistake
Putting text straight into card without card-body. The card itself has no padding — card-body does — so the text sticks to the border. card-img-top images and list-group-flush lists go straight into the card, while text and buttons go into card-body.