Center button under form in bootstrap

Question

i have some problems with Bootstrap  i centered form and button by using span6 offset3 and don t know how to center button under this form right now  i tried with text-align  center but still it s more on the left    lt div class  container  gt       lt div class  row  gt           lt div class  span6 offset3  gt               lt form gt                   lt input class  input-xxlarge  type  text  placeholder  Email    gt                   lt p style  line-height  70px  text-align  center   gt  lt button type  submit  class  btn  gt Confirm lt  button gt  lt  p gt               lt  form gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

I do it like this  lt center gt  lt  center gt    lt div class  form-actions  gt               lt center gt                       lt button type  submit  class  submit btn btn-primary   gt                          Sign In  lt i class  icon-angle-right  gt  lt  i gt                       lt  button gt               lt  center gt   lt  div gt

User · Answer

With Bootstrap 3  you can use the  text-center  styling attribute    lt div class  col-md-3 text-center  gt      lt button id  button  name  button  class  btn btn-primary  gt Press Me  lt  button gt    lt  div gt

User · Answer

Try giving  default width  display it with block and center it with margin  0 auto   like this    lt p style  display block  line-height  70px  width 200px  margin 0 auto   gt  lt button type  submit  class  btn  gt Confirm lt  button gt  lt  p gt

User · Answer

If you re using Bootstrap 4  try this    lt div class  mx-auto text-center  gt       lt button id  button  name  button  class  btn btn-primary  gt Press Me  lt  button gt   lt  div gt

User · Answer

Using Bootstrap  the correct way is to use the offset class   Use math to determine the left offset   Example    You want a button full width on mobile  but 1 3 width and centered on tablet  desktop  large desktop       So out of 12  bootstrap  columns  you re using 4 to offset  4 for the button  then 4 is blank to the right   See if that works

User · Answer

Remove that  lt p gt  tag and add the button inside a  lt div class  form-actions  gt  like this    lt div class  form-actions  gt       lt button type  submit  class  btn  gt Confirm lt  button gt   lt  div gt    an then augment the CSS class with    form-actions       margin  0      background-color  transparent      text-align  center      Here s a JS Bin demo  http   jsbin com ijozof 2    Look for form-actions at the Bootstrap doc here   http   twitter github io bootstrap base-css html buttons

User · Answer

With Bootstrap you can simply use class text-center    lt div class  container  gt       lt div class  row  gt           lt form gt               lt input class  input-xxlarge  type  text  placeholder  Email    gt           lt  form gt            lt div class  text-center  gt               lt button type  submit  class  btn  gt Confirm lt  button gt           lt  div gt       lt  div gt   lt  div gt    DEMO

User · Answer

You can use this  lt button type  quot submit quot  class  quot btn btn-primary btn-block w-50 mx-auto quot  gt Search lt  button gt   Look something like this  Complete Form code -  lt form id  quot submit quot  gt       lt input type  quot text quot  class  quot form-control mt-5 quot  id  quot search-city quot              placeholder  quot Search City quot  gt       lt button type  quot submit quot  class  quot btn btn-primary mt-3 btn-sm btn-block w-50              mx-auto quot  gt Search lt  button gt      lt  form gt

User · Answer

Try adding this class   class  pager    lt p class  pager  style  line-height  70px   gt       lt button type  submit  class  btn  gt Confirm lt  button gt   lt  p gt    I tried mine within a  lt div class pager gt  lt button etc etc gt  lt  div gt   which worked well  See http   getbootstrap com components  look under Pagination -  Pager  This looks like the correct bootstrap class to center this  text-align  center  is meant for text not images and blocks etc

User · Answer

Width 100  and text-align center would work in my experience   lt p style  display block  line-height  70px  width 100   text-align center  margin 0 auto   gt  lt button type  submit  class  btn  gt Confirm lt  button gt  lt  p gt

User · Answer

It s working completely try this    lt div class  button pull-left  style  padding-left 40     gt

[html] Center button under form in bootstrap

Examples related to html

Examples related to css

Examples related to button

Examples related to twitter-bootstrap

Examples related to center