What's the best way to center a button inside a Bootstrap card using flex utilities?

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

Post this Question & Answer:

What's the best way to center a button inside a Bootstrap card using flex utilities?

Asked on Oct 01, 2025

Answer

To center a button inside a Bootstrap card using flex utilities, you can utilize Bootstrap's flexbox classes to align and justify the content. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <div class="card" style="width: 18rem;">
            <div class="card-body d-flex justify-content-center align-items-center">
                <button class="btn btn-primary">Centered Button</button>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class makes the card body a flex container.
`justify-content-center` centers the button horizontally.
`align-items-center` centers the button vertically within the card body.

✅ 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 button inside a Bootstrap card using flex utilities?

Asked on Oct 01, 2025

Answer

The Q&A Network