How can I vertically center a single column inside a row with varying heights?

Asked on Jun 11, 2025

1 Answer

To vertically center a single column inside a row with varying heights in Bootstrap 5, you can use the `align-items-center` class on the row. This class uses Flexbox to align items vertically.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row align-items-center" style="height: 200px;">
                <div class="col">
                    <div class="p-3 bg-primary text-white">Centered Content</div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `align-items-center` class is used to vertically center the content within the row.
The `style="height: 200px;"` is applied to the row to simulate varying heights; adjust as needed.
The `bg-primary` and `text-white` classes are used for styling the content for better visibility.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions