How can I vertically and horizontally center a div using Bootstrap utilities?

Asked on Jun 01, 2025

1 Answer

To vertically and horizontally center a div using Bootstrap utilities, you can use the `d-flex`, `justify-content-center`, and `align-items-center` classes.

<!-- 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 Content
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class applies the flexbox layout to the container.
`justify-content-center` centers the content horizontally.
`align-items-center` centers the content vertically.
The `style="height: 100vh;"` ensures the container takes the full viewport height.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions