Bootstrap Cards
Cards are flexible, boxed containers used to group related content like an image, title, text, and a button. The .card class is the outer wrapper, and pieces inside use classes like .card-body, .card-title, and .card-text.
Cards are one of the most commonly used Bootstrap components, perfect for product listings, blog previews, profile summaries, and dashboard widgets.
<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Text</p>
</div>
</div>Card structure
A card usually starts with .card as the outer div, an optional .card-img-top image, and a .card-body containing .card-title, .card-text, and action buttons or links.
Card variations
Cards can include headers (.card-header), footers (.card-footer), and can be arranged into groups (.card-group) or a responsive grid using regular grid columns.
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text for the card.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>A boxed card with an image on top, a title, description text, and a blue buttonThis is the classic Bootstrap card layout: image, title, text, and a call-to-action button.
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special Offer</h5>
<p class="card-text">Save 20% today only.</p>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>A card with a labeled header, main content, and a muted footercard-header and card-footer add extra sections above and below the main card-body.
Key points
- .card is the outer container for the whole component.
- .card-body holds the main content like title and text.
- .card-img-top places an image at the top of the card.
- .card-header and .card-footer add optional extra sections.