How to Achieve Equal Card Heights in Bootstrap Card Columns?

Bootstrap Card Columns: Achieving Equal Card Height

In Bootstrap 4, the card-columns class allows for the creation of an aesthetically pleasing layout where multiple cards are arranged in columns with variable heights. However, this can lead to uneven card heights, which may not be desirable.

To achieve uniform card heights, Bootstrap provides two solutions:

Option 1: Setting Heights on row or column Elements

You can align card heights by setting the align-items-stretch utility class on either the row or column elements within which the cards are contained. This will stretch the cards vertically to fill the available space.

<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>
</div>

Option 2: Flexbox Solution for Bootstrap 5

For Bootstrap 5, the following CSS code can be used to achieve equal card heights within card-columns using Flexbox properties:

.card-columns {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

Example in CodePen

For a live demonstration of this solution in CodePen, please visit the following link:
https://codepen.io/Kerrys7777/pen/QWgwEeG

The above is the detailed content of How to Achieve Equal Card Heights in Bootstrap Card Columns?. For more information, please follow other related articles on the PHP Chinese website!