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    lt  -- Button -- gt   lt div class  form-group  gt       lt label class  col-md-4 control-label  for  singlebutton  gt  lt  label gt       lt div class  col-md-4  gt           lt button id  singlebutton  name  singlebutton  class  btn btn-primary center-block  gt              Next Step           lt  button gt       lt  div gt   lt  div gt

User · Answer

For Bootstrap 3

we divide the space with the columns, we use 8 small columns (col-xs-8), we leave 4 empty columns (col-xs-offset-4) and we apply the property (center-block)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

For Bootstrap 4

We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

User · Answer

It works for me  try to make an independent  lt div gt then put the button into that  just like this      lt div id  contactBtn  gt               lt button type  submit  class  btn btn-primary   gt Send lt  button gt   lt  div gt    Then Go to to your CSSStyle page and do the Text-align center like this     contactBtn text-align  center

User · Answer

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

User · Answer

Wrap the Button in div with  text-center  class   Just change this    lt  -- wrong -- gt   lt div class  col-md-4 center-block  gt       lt button id  singlebutton  name  singlebutton  class  btn btn-primary center-block  gt Next Step  lt  button gt   lt  div gt    To this     lt  -- correct -- gt   lt div class  col-md-4 text-center  gt        lt button id  singlebutton  name  singlebutton  class  btn btn-primary  gt Next Step  lt  button gt    lt  div gt    Edit  As of BootstrapV4  center-block was dropped  19102 in favor of m- -auto

User · Answer

I tried the following code and it worked for me    lt button class  btn btn-default center-block  type  submit  gt Button lt  button gt    The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div  Check the link where you will find the center-block class  http   getbootstrap com css  helper-classes-center

User · Answer

According to the Twitter Bootstrap documentation  http   getbootstrap com css  helper-classes-center   lt  -- Button -- gt   lt div class  form-group  gt      lt label class  col-md-4 control-label  for  singlebutton  gt  lt  label gt      lt div class  col-md-4 center-block  gt         lt button id  singlebutton  name  singlebutton  class  btn btn-primary center-block  gt            Next Step          lt  button gt      lt  div gt     lt  div gt    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

User · Answer

lt div class  row  gt     lt div class  col-sm-12  gt       lt div class  text-center  gt         lt button class  btn btn-primary  id  singlebutton  gt  Next Step  lt  button gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

You can do the following  It also avoids buttons overlapping    lt div class  center-block  style  max-width 400px  gt     lt a href     class  btn btn-success  gt Accept lt  a gt     lt a href     class  btn btn-danger  gt  Reject lt  a gt   lt  div gt

User · Answer

add to your style   display  table  margin  0 auto

User · Answer

use text-align  center css property

User · Answer

or you can give specific offsets to make button position where you want simply with bootstrap grid system    lt div class  col-md-offset-4 col-md-2 col-md-offset-5  gt   lt input type  submit  class  btn btn-block  value  submit   gt    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

User · Answer

lt div class  container-fluid  gt      lt div class  col-sm-12 text-center  gt          lt button class  btn btn-primary  title  Submit  gt  lt  button gt          lt button class  btn btn-warning  title  Cancel  gt  lt  button gt      lt  div gt   lt  div gt

User · Answer

I had this problem  I used   lt div class    col-xs-8 text-center  gt    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

User · Answer

Update for Bootstrap 4   Wrap the button with a div set with the  d-flex  and  justify-content-center  utility classes to take advantage of flexbox    lt  -- Button -- gt   lt div class  form-group  gt     lt div class  d-flex justify-content-center  gt       lt button id  singlebutton  name  singlebutton  class  btn btn-primary  gt        Next Step       lt  button gt     lt  div gt   lt  div gt    The benefit of using flexbox is being able to add additional elements buttons on the same axis  but with their own separate alignment  It also opens up the possibility of vertical alignment with the  align-items-start center end  classes  too   You could wrap the label and button with another div to keep them aligned with each other   e g  https   codepen io anon pen BJoeRY editors 1000

[html] How to center buttons in Twitter Bootstrap 3?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to button