What’s the correct way to use Bootstrap’s grid system with cards of different heights? Pending Review
Asked on Sep 16, 2025
1 Answer
Bootstrap's grid system can be effectively used to align cards of different heights by utilizing the "d-flex" and "align-items-stretch" classes. This ensures that all cards in a row have the same height.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col d-flex align-items-stretch">
<div class="card">
<img src="image1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col d-flex align-items-stretch">
<div class="card">
<img src="image2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col d-flex align-items-stretch">
<div class="card">
<img src="image3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->- Use "row-cols-1 row-cols-md-3" to create responsive columns that adjust based on screen size.
- Apply "d-flex" and "align-items-stretch" to the column ("col") to ensure all cards have the same height within a row.
- Each card should be wrapped in a "col" to maintain grid structure.
- Images and text within the card can be customized as needed.