How do I center a button in Bootstrap 5 without using custom CSS?

Asked on Sep 22, 2025

1 Answer

In Bootstrap 5, you can center a button using the built-in utility classes for flexbox and alignment. Here's a simple example of how to achieve this.

<!-- BEGIN COPY / PASTE -->
        <div class="d-flex justify-content-center">
            <button type="button" class="btn btn-primary">Centered Button</button>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Wrap your button in a `
` with the class `d-flex` to enable flexbox layout.
Use `justify-content-center` to horizontally center the button within the flex container.
This approach requires no custom CSS and uses Bootstrap's utility classes for alignment.

✅ Answered with Bootstrap 5 best practices.