Bootstrap Q&A Logo
Bootstrap Q&A Part of the Q&A Network
Q&A Logo

What's the best way to center a button horizontally using Bootstrap's grid system?

Asked on Oct 05, 2025

Answer

To center a button horizontally using Bootstrap's grid system, you can utilize the `d-flex` and `justify-content-center` classes. These classes allow you to align items centrally within a flex container. 
<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col-12 d-flex justify-content-center">
                    <button type="button" class="btn btn-primary">Centered Button</button>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->
Additional Comment:
  • Wrap the button in a `div` with the `d-flex` and `justify-content-center` classes to center it horizontally.
  • The `col-12` class ensures the button takes up the full width of the column, allowing it to be centered properly.
  • This method is responsive and works well with different screen sizes.
✅ Answered with Bootstrap 5 best practices.
Recommended Links:
Bootstrap BuilderBootstrapMade
← Back to All Questions