Centering a Twitter Bootstrap button

Question

I m making a form with Twitter Bootstrap  and am having a really difficult time centering the button  It s contained inside a div with a span of 7  Below is the HTML  and the button is at the very bottom  Any recommendations on how to center this thing    lt div class  form span7  gt     lt div id  get-started  gt       lt div id  form-intro  gt         lt strong gt  lt h1 gt 1  Get Started  Some basics lt  h1 gt  lt  strong gt       lt  div gt       lt form class  form-horizontal  gt         lt div class  control-group  gt           lt label class  control-label  for  inputSaving  gt What are you saving for  lt  label gt           lt div class  controls  gt             lt input class  span4  type  text  id  inputSaving  placeholder  e g  Swimming Lessons  Birthday Party  College Fund  etc   gt           lt  div gt         lt  div gt         lt div class  control-group  gt           lt label class  control-label  for  description  gt Add a short description lt  label gt           lt div class  controls  gt             lt textarea class  span4  id  description  rows  4  placeholder  Describe in your own words the saving goal for this piggybank  gt  lt  textarea gt           lt  div gt         lt  div gt         lt div class  control-group  gt           lt label class  control-label  for  categoryselect  gt Choose a Category lt  label gt           lt div class  controls  gt             lt select class  span4  id  categoryselect  gt               lt  -- Add some CSS and JS to make a placeholder value-- gt               lt option value  Kittens  gt Kittens lt  option gt               lt option value  Keyboard Cat  gt Keyboard Cat lt  option gt               lt option value  Twitter Bird  gt Twitter Bird lt  option gt             lt  select gt           lt  div gt         lt  div gt         lt div class  control-group  gt           lt label class  control-label  for  imageselect  gt Choose an image lt  label gt           lt div class  controls span4  gt             lt img src  piggyimage png  id  imageselect  alt  image-select    gt           lt  div gt         lt  div gt         lt div class  control-group  gt           lt label class  control-label  for  goal  gt Your Saving Goal lt  label gt           lt div class  controls  gt             lt input type  text  class  span4  id  goal  placeholder   1337  gt           lt  div gt         lt  div gt         lt button class  btn btn-large btn-primary  type  button  gt Submit lt  button gt       lt  form gt     lt  div gt   lt  div gt

User · Answer

span7 btn   display  block    margin-left  auto    margin-right  auto      I am not completely familiar with bootstrap  but something like the above should do the trick  It may not be necessary to include all of the classes  This should center the button within its parent  the span7

User · Answer

Wrap in a div styled with  text-center  class

User · Answer

If you don t mind a bit more markup  this would work    lt div class  centered  gt       lt button class  btn btn-large btn-primary  type  button  gt Submit lt  button gt   lt  div gt    With the corresponding CSS rule    centered       text-align center      I have to look at the CSS rules for the btn class  but I don t think it specifies a width  so auto left  amp  right margins wouldn t work  If you added one of the span or input- rules to the button  auto margins would work  though   Edit   Confirmed my initial thought  the btn classes do not have a width defined  so you can t use auto side margins  Also  as  AndrewM notes  you could simply use the text-center class instead of creating a new ruleset

User · Answer

Bootstrap has it s own centering class named text-center    lt div class  span7 text-center  gt  lt  div gt

User · Answer

Question is a bit old  but easy way is to apply  center-block to button

User · Answer

If you have more than one button  then you can do the following    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

Since you want to center the button  and not the text  what I ve done in the past is add a class  then use that class to center the button    lt button class  btn btn-large btn-primary newclass  type  button  gt Submit lt  button gt    and the CSS would be    btn newclass  width 25   display block  margin  0 auto     The  width  value is up to you  and you can play with that to get the right look   Steve

User · Answer

Bootstrap have a specific class for this  center-block   lt button type  button  class  your class center-block  gt  Book  lt  button gt

[html] Centering a Twitter Bootstrap button

Examples related to html

Examples related to css

Examples related to button

Examples related to twitter-bootstrap