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.

Bootstrap Button Centered with text-center Class (v3)