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<

Answer 1

or you can give specific offsets to make button position where you want simply with bootstrap grid system,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

this way, also let you specify button size if you set btn-block. sure, this will only work md size range, if you want to set other sizes too, use xs,sm,lg.

Answer 2

It works for me try to make an independent <div>then put the button into that. just like this :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Then Go to to your CSSStyle page and do the Text-align:center like this :

#contactBtn{text-align: center;}

Answer 3

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/

Answer 4

<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>

Answer 5

I had this problem. I used

<div class = "col-xs-8 text-center">

On my div containing a few h3 lines, a couple h4 lines and a Bootstrap button. Everything besides the button jumped to the center after I used text-center so I went into my CSS sheet overriding Bootstrap and gave the button a

margin: auto;

which seems to have solved the problem.

Answer 6

You can do it by giving margin or by positioning those elements absolutely.

For example

.button{
  margin:0px auto; //it will center them 
}

0px will be from top and bottom and auto will be from left and right.