Bootstrap Cards

Cards are flexible content boxes. Structure: .card > .card-body, optional .card-header, .card-footer, .card-title, .card-text, and .card-img-top.

Cards

Cards are flexible content boxes. Structure: .card > .card-body, optional .card-header, .card-footer, .card-title, .card-text, and .card-img-top.

Use grid columns to lay out multiple cards. .card-group and .card-deck patterns are replaced by grid rows in BS5.

Real-life example: Cards are like baseball trading cards — photo on top, name and stats below, all in one neat bordered packet.

Basic card with image

<div class="card" style="max-width: 18rem;">
  <img src="course.jpg" class="card-img-top" alt="Course cover" />
  <div class="card-body">
    <h5 class="card-title">Bootstrap 5</h5>
    <p class="card-text">Learn layout and components step by step.</p>
    <a href="#" class="btn btn-primary">Enroll</a>
  </div>
</div>

Card grid layout

Place cards inside .row and .col-* for responsive grids. Equal height cards work well with .h-100 on the .card.

Real-life example: A card grid is like a shop shelf — three products per row on desktop, one per row on mobile when columns stack.

Three cards in a row

<div class="container">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">HTML</h5>
          <p class="card-text">Structure the web.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">CSS</h5>
          <p class="card-text">Style every page.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Bootstrap</h5>
          <p class="card-text">Build UI faster.</p>
        </div>
      </div>
    </div>
  </div>
</div>