A card is a bordered container that replaced the panels, wells and thumbnails of Bootstrap 3 2,007 . Its parts are optional: .card-header, .card-footer, a .card-body with .card-title, .card-subtitle, .card-text and .card-link, .card-img-top or .card-img-bottom images, and flush list groups. Cards have no width or margin of their own; the grid sizes them.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="row row-cols-1 row-cols-sm-3 g-3 p-3">
<div class="col"><div class="card h-100">
<div class="card-img-top bg-info-subtle" style="height: 60px"></div>
<div class="card-body"><h5 class="card-title">Starter</h5>One site, community support.</div>
<div class="card-footer text-body-secondary">Free</div>
</div></div>
<div class="col"><div class="card h-100 border-primary">
<div class="card-header text-bg-primary">Most popular</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">10 sites</li><li class="list-group-item">Email support</li>
</ul>
<div class="card-body"><a href="#" class="btn btn-primary">Choose Pro</a></div>
</div></div>
<div class="col"><div class="card h-100 text-bg-dark">
<div class="card-img h-100" style="background: linear-gradient(135deg, #1565c0, #6a1b9a)"></div>
<div class="card-img-overlay"><h5 class="card-title">Enterprise</h5>Text over an image.</div>
</div></div>
</div>
.row-cols-1 .row-cols-sm-3 shows one card per row on phones and three from 576 pixels, and .h-100 stretches each card to its row height. Color cards with .text-bg-{color} or .border-{color}. For an image beside the text, nest a .row.g-0 with .col-md-4 and .col-md-8 columns in the card. .card-group joins cards into one attached block of equal columns from sm up. For Pinterest-style layouts, Bootstrap 5 points to the Masonry 117,747 plugin (github.com/desandro/masonry (https://github.com/desandro/masonry 16,697 )).