What is the best way to align items inside a Bootstrap 5 flexbox container?

Asked on Jun 01, 2025

1 Answer

In Bootstrap 5, you can align items inside a flexbox container using utility classes. These classes allow you to align items both horizontally and vertically with ease.

<!-- BEGIN COPY / PASTE -->
        <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
            <div class="p-2 bg-primary text-white">Aligned Item</div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class is used to create a flex container.
`justify-content-center` centers the item horizontally.
`align-items-center` centers the item vertically.
The `style` attribute with `height: 200px;` is used to demonstrate vertical alignment within a specific height.
You can replace `center` with `start`, `end`, `between`, `around`, or `evenly` for different alignment options.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions