How can I keep cards the same height without JS?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I keep cards the same height without JS?

Asked on May 30, 2025

Answer

To keep Bootstrap cards the same height without using JavaScript, you can use the `d-flex` and `align-items-stretch` classes. This approach ensures that all cards in a row have the same height.

<!-- BEGIN COPY / PASTE -->
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `h-100` class on the card ensures each card takes the full height of its parent.
The `row-cols-1 row-cols-md-3` classes create a responsive grid that adjusts the number of columns based on screen size.
The `g-4` class adds a gutter between columns for spacing.
Ensure images or other content inside the card do not exceed the card's height.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I keep cards the same height without JS?

Asked on May 30, 2025

Answer

The Q&A Network