How to make Bootstrap 4 cards the same height in card-columns with HTML?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *