Card columns
Bootstrap 5 Card columns component
Responsive Card columns built with Bootstrap 5. Use the Bootstrap grid system to control how many grid columns you show per row. Many examples and tutorials.
Basic example
Use class .row-cols to control how many grid columns (wrapped around your cards) you show
per row. Here’s .row-cols-3 laying out the cards on three columns.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-3 g-3">
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top"
alt="Hollywood Sign on The Hill" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top"
alt="Palm Springs Road" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top"
alt="Los Angeles Skyscrapers" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top"
alt="Skyscrapers" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp" class="card-img-top"
alt="Skyscrapers" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/050.webp" class="card-img-top"
alt="Skyscrapers" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
</div>
Two columns
Use the class .row-cols-2 to lay out the cards on two columns.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
<div class="row row-cols-2 g-3">
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top"
alt="Hollywood Sign on The Hill" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top"
alt="Palm Springs Road" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top"
alt="Los Angeles Skyscrapers" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top"
alt="Skyscrapers" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content.
</p>
</div>
</div>
</div>
</div>
Responsive
Here’s .row-cols-1 laying out the cards on one column, .row-cols-md-2 splitting cards to equal width across multiple rows, from the medium breakpoint up and .row-cols-lg-3 splitting cards from the large breakpoint up.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp" class="card-img-top" alt="Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/050.webp" class="card-img-top" alt="Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
</div>
Spacing
Use gutters to add padding between your columns. Add .g-* to the main div.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-3 g-4">
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp" class="card-img-top" alt="Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/050.webp" class="card-img-top" alt="Skyscrapers">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
</div>
Equal height
When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card h-100">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
</div>
Horizontal
Here’s an example of columns with horizontal cards.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="row row-cols-2 g-3">
<div class="col">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
alt="Trendy Pants and Shoes"
class="img-fluid rounded-start"
/>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
alt="Trendy Pants and Shoes"
class="img-fluid rounded-start"
/>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
alt="Trendy Pants and Shoes"
class="img-fluid rounded-start"
/>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
alt="Trendy Pants and Shoes"
class="img-fluid rounded-start"
/>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>