How can I keep cards the same height without JS?
Asked on Jun 12, 2025
1 Answer
To keep Bootstrap cards the same height without using JavaScript, you can use the `d-flex` and `align-items-stretch` classes. This approach ensures that all cards in a row have the same height.
<!-- BEGIN COPY / PASTE -->
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</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">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</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">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</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>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `h-100` class on the card ensures each card takes the full height of its parent.
- The `row-cols-1 row-cols-md-3` classes create a responsive grid that adjusts the number of columns based on screen size.
- The `g-4` class adds a gutter between columns for spacing.
- Ensure images or other content inside the card do not exceed the card's height.