CodeMIRAI
0 XP

Cards

2 min read 3 runnable examples Quiz included

A card is a flexible content container with an optional image, header, body and footer. Cards are perfect for products, courses, articles and profiles.

HTML + Bootstrap
<div class="container py-3">
  <div class="card" style="max-width: 20rem;">
    <img src="https://picsum.photos/seed/card1/400/220" class="card-img-top" alt="Landscape">
    <div class="card-body">
      <h5 class="card-title">Python for beginners</h5>
      <p class="card-text text-secondary">Start from zero and write real programs in a week.</p>
      <a href="#" class="btn btn-primary">Start learning</a>
    </div>
  </div>
</div>

The card parts

ClassPart
cardthe outer box
card-img-topan image at the top
card-bodypadded content area
card-title, card-subtitle, card-texttext inside the body
card-header, card-footerbars above and below the body
HTML + Bootstrap
<div class="container py-3">
  <div class="card text-center" style="max-width: 22rem;">
    <div class="card-header">Most popular</div>
    <div class="card-body">
      <h5 class="card-title">SQL for data <span class="badge text-bg-success">New</span></h5>
      <p class="card-text">Query real databases from your first SELECT to joins.</p>
      <a href="#" class="btn btn-outline-primary">View course</a>
    </div>
    <div class="card-footer text-body-secondary">23 lessons</div>
  </div>
</div>

Cards in a grid

Combine cards with the grid, and h-100 makes cards in a row equally tall:

HTML + Bootstrap
<div class="container py-3">
  <div class="row row-cols-1 row-cols-md-3 g-3">
    <div class="col">
      <div class="card h-100"><div class="card-body">
        <h5 class="card-title">Python</h5><p class="card-text">The friendliest first language.</p>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body">
        <h5 class="card-title">JavaScript</h5><p class="card-text">The language of the web, in the browser and on the server.</p>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body">
        <h5 class="card-title">SQL</h5><p class="card-text">Ask questions of data.</p>
      </div></div>
    </div>
  </div>
</div>

row-cols-1 row-cols-md-3 sets how many columns per row (1 on phones, 3 from tablets up) without giving each column a size.

Finished this lesson?Mark it complete to earn +20 XP and move your progress on.