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

What's the best way to center a div using Bootstrap utility classes?

Asked on Nov 17, 2025

Answer

To center a div using Bootstrap utility classes, you can use the flexbox utilities provided by Bootstrap. This method is both simple and effective for horizontal and vertical centering.

<!-- 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 parent div.
`justify-content-center` centers the content horizontally.
`align-items-center` centers the content vertically.
The `style="height: 100vh;"` ensures the parent div takes the full viewport height, which is necessary for vertical centering in this example.
The inner div has padding and a background color for better visibility.

✅ Answered with Bootstrap 5 best practices.

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

What's the best way to center a div using Bootstrap utility classes?

Asked on Nov 17, 2025

Answer

The Q&A Network