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:
✅ Answered with Bootstrap 5 best practices.- 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.
Recommended Links:
← Back to All Questions