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

How do I align items vertically in a Bootstrap grid row using flex utilities?

Asked on Nov 15, 2025

Answer

In Bootstrap 5, you can use flex utilities to align items vertically within a grid row. The `align-items` utility classes are used to control the vertical alignment of flex items.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row align-items-center">
                <div class="col">
                    <div class="p-3 border bg-light">Item 1</div>
                </div>
                <div class="col">
                    <div class="p-3 border bg-light">Item 2</div>
                </div>
                <div class="col">
                    <div class="p-3 border bg-light">Item 3</div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `align-items-center` class aligns items vertically in the center of the row.
Other options include `align-items-start` for top alignment and `align-items-end` for bottom alignment.
These classes are responsive, so you can use variants like `align-items-md-center` for specific breakpoints.

✅ Answered with Bootstrap 5 best practices.

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

How do I align items vertically in a Bootstrap grid row using flex utilities?

Asked on Nov 15, 2025

Answer

The Q&A Network