How to Center a Button in Bootstrap (3 ways)
Getting a Bootstrap Button centered is a common alignment goal. In this tutorial, I will use Bootstrap alignment classes to center a button. However, in Bootstrap v3 the alignment classes aren’t available so I will use flex CSS in custom classes.
Getting a button centered depends on the classes applied to the wrapping div, not classes on the button itself.
Bootstrap Button Centered with Bootstrap Classes
Bootstrap 4 and 5 have built in flex classes. These include a d-flex
class for setting flex on an element, and justify
and align-item
classes for aligning horizontally and vertically.
Here’s the code to horizontally center a Bootstrap button in v4 and v5:
<div class="d-flex justify-content-center">
<button class="btn btn-primary" type="button">
Horizontally Centered Button
</button>
</div>
And here’s how to vertically center a button in v4 and v5:
<div class="d-flex align-items-center">
<button class="btn btn-primary" type="button">
Vertically Centered Button
</button>
</div>
Remember that justify-content aligns horizontally only if the flex-direction is set to row
(which is the default). If flex-direction is column
, then align-items will control horizontal alignment.