Home > Web Front-end > CSS Tutorial > How to Make Bootstrap Cards in Card Columns Have Equal Height Without Hardcoding?

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

Susan Sarandon
Release: 2024-12-14 09:41:10
Original
196 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template