How do I create equal-height columns in a Bootstrap row?

Asked on Jun 07, 2025

1 Answer

To create equal-height columns in a Bootstrap row, you can use the `d-flex` class on the row and the `flex-fill` class on the columns. This ensures that all columns have the same height.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row d-flex">
                <div class="col-md-4 flex-fill bg-primary text-white p-3">
                    Column 1
                </div>
                <div class="col-md-4 flex-fill bg-secondary text-white p-3">
                    Column 2
                </div>
                <div class="col-md-4 flex-fill bg-success text-white p-3">
                    Column 3
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class applies the flexbox layout to the row, making it easier to manage column heights.
The `flex-fill` class ensures that each column takes up equal space within the row.
You can customize the background colors and padding as needed for visual distinction.
This approach works well for responsive layouts, as Bootstrap's grid system is inherently responsive.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions