Sometimes, we want to make Bootstrap 4 cards the same height in card-columns with HTML.
In this article, we’ll look at how to make Bootstrap 4 cards the same height in card-columns with HTML.
How to make Bootstrap 4 cards the same height in card-columns with HTML?
To make Bootstrap 4 cards the same height in card-columns with HTML, we use the row, col, and flexbox classes.
For instance, we write
div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
</div>
to make the inner divs columns with the col-lg-4 class.
Then we use d-flex to make the flex containers.
And we use align-items-stretch to make the column divs stretch to the height of the parent div.
Conclusion
To make Bootstrap 4 cards the same height in card-columns with HTML, we use the row, col, and flexbox classes.
