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?

<div class="form span7">
  <div id="get-started">
    <div id="form-intro">
      <strong><h1>1. Get Started: Some basics</h1></strong>
    </div>
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
          <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
          <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
          <select class="span4" id="categoryselect">
            <!-- Add some CSS and JS to make a placeholder value-->
            <option value="Kittens">Kittens</option>
            <option value="Keyboard Cat">Keyboard Cat</option>
            <option value="Twitter Bird">Twitter Bird</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="imageselect">Choose an image</label>
        <div class="controls span4">
          <img src="piggyimage.png" id="imageselect" alt="image-select" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
          <input type="text" class="span4" id="goal" placeholder="$1337">
        </div>
      </div>
      <button class="btn btn-large btn-primary" type="button">Submit</button>
    </form>
  </div>
</div>

Answer 1

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

Answer 2

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:

<button class="btn btn-large btn-primary newclass" type="button">Submit</button>

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

Answer 3

Wrap in a div styled with "text-center" class.

Answer 4

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

Answer 5

If you don't mind a bit more markup, this would work:

<div class="centered">
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</div>

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

Answer 6

If you have more than one button, then you can do the following.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>