BS5 Cards

Basic card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card content goes here.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

Card with header and footer

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title</h5>
    <p class="card-text">Supporting text.</p>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

Card with image

<div class="card" style="max-width: 360px;">
  <img src="photo.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with image</h5>
    <p class="card-text">Short description.</p>
  </div>
</div>

Horizontal card layout

<div class="card" style="max-width: 680px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="photo.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal card</h5>
        <p class="card-text">This layout is great for listings.</p>
      </div>
    </div>
  </div>
</div>

Card groups and grids

Cards are often placed in grids using the Bootstrap grid system.

<div class="row g-3">
  <div class="col-12 col-md-6 col-lg-4">
    <div class="card h-100">
      <div class="card-body">Card</div>
    </div>
  </div>
</div>

Best practices

• Use h-100 for equal-height card grids
• Keep card text short for consistent layouts
• Use images consistently (same aspect ratio) in listing grids