How to center buttons in Twitter Bootstrap 3?

Question

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?

Here is my code.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Solution 1

Wrap the Button in div with "text-center" class.

Just change this:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

To this:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Edit

As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto

Solution 2

According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.

See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/

Solution 3

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Solution 4

add to your style:

display: table; margin: 0 auto;

Solution 5

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

View more solutions

Comments

[Ajean]

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

[mjwrazor]

This is the one that worked for me. I tried the others above and it wouldn't center.

[InfZero]

How to do the same with an input element?

[divideByZero]

Works even with Foundation )

[Fergus]

Not sure how you came to this conclusion.

[Stefan Crain]

While this code snippet may solve the question, including an explanation helps to improve the quality of your response. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[cloudxix]

this should be the accepted answer. works perfectly.