Cards in Bootstrap

From the Bootstrap 5 cheat sheet · Components · verified Jul 2026

Cards

Card component for content containers

html
<!-- Basic Card -->
<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card content</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Card with Header/Footer -->
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Content</p>
  </div>
  <div class="card-footer">Footer</div>
</div>
💡 Use h-100 class to make cards equal height in grid
⚡ Card groups make cards equal height automatically
📌 text-bg-* combines text and background colors
🔥 Use card-img-overlay for text over images

More Bootstrap tasks

Back to the full Bootstrap 5 cheat sheet