How to Create Equal-Height Bootstrap Cards in Card Columns?

Equal Height Bootstrap Cards in Card Columns

When using Bootstrap's card-columns class, cards of different heights can create an uneven layout. To achieve equal height cards, consider the following solutions:

Using align-items-stretch on Columns

In the parent row containing the card-columns class, add the utility class d-flex align-items-stretch to each column. This will align the card content vertically, effectively creating cards of equal height:

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

Example for Bootstrap 5 (BS5)

The following full HTML example demonstrates the align-items-stretch solution in BS5:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
    </div>
</div>

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