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!