How to Make Bootstrap Cards in Card Columns Have Equal Height Without Hardcoding?

How to Make Bootstrap Cards Have Equal Height in Card Columns

When working with Bootstrap 4, you might encounter the need to make all cards in a card-columns layout share the same height. This ensures a consistent and visually pleasing appearance.

Problem Statement

Using the voorbeeld in the Bootstrap documentation, how can you force all cards to have the same height without resorting to hard-coded solutions?

Answer

Adding Align-Items Property

To achieve equal card height, you can leverage the align-items property on the row or column elements containing the cards. This property specifies how flex items are aligned vertically within their container.

Option 1: Use on Row

Wrap your card-columns element within a row element and add the align-items-stretch class to it. This will align the cards vertically, ensuring they stretch their height to match the tallest card.

<div class="container">
    <div class="row align-items-stretch">
        <div class="col-lg-4">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4">
            <div class="card">...</div>
        </div>
    </div>
</div>

Option 2: Use on Column

Alternatively, you can add the align-items-stretch class directly to each col element. This will align the cards vertically within each column, effectively resulting in equal heights.

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">...</div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">...</div>
        </div>
    </div>
</div>

UPDATE for Bootstrap 5

In Bootstrap 5, the align-items-stretch class has been replaced with the align-self-stretch class for better control over individual card alignment.

<div class="row">
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
</div>

Note: Using align-items on the row element will hide the borders of the cards, while using it on the column element will not. Choose the method that best suits your design requirements.

The above is the detailed content of How to Make Bootstrap Cards in Card Columns Have Equal Height Without Hardcoding?. For more information, please follow other related articles on the PHP Chinese website!