How do I center a div using Bootstrap utilities?

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

Post this Question & Answer:

How do I center a div using Bootstrap utilities?

Asked on Sep 19, 2025

Answer

In Bootstrap 5, you can easily center a div using utility classes. Here's a simple example to demonstrate how to center a div both horizontally and vertically.

<!-- BEGIN COPY / PASTE -->
        <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
            <div class="p-3 bg-primary text-white">
                Centered Div
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class makes the container a flexbox.
`justify-content-center` centers the div horizontally.
`align-items-center` centers the div vertically.
The `style="height: 100vh;"` ensures the container takes the full viewport height, allowing vertical centering.

✅ Answered with Bootstrap 5 best practices.

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

How do I center a div using Bootstrap utilities?

Asked on Sep 19, 2025

Answer

The Q&A Network