Cards
5 min read Quiz at the end
Create image cards, card grids with row-cols, horizontal cards, and equal-height h-100 cards.
Cards
<!-- Basic card -->
<div class="card">
<img src="photo.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick description.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">Last updated 3 days ago</div>
</div>
<!-- Horizontal card -->
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4"><img src="..." class="img-fluid rounded-start"></div>
<div class="col-md-8">
<div class="card-body"><h5 class="card-title">Title</h5></div>
</div>
</div>
</div>
<!-- Card grid -->
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col"><div class="card h-100">...</div></div>
</div>
Topic Quiz · 2 questions
Test your understanding before moving on
1. What does card h-100 do?
💡 h-100 makes cards equal height by stretching to column full height.
2. What is card-img-top used for?
💡 card-img-top places an image at the top of a card with proper border-radius.