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>

Lucas Santos · Answer 1 · 2015-08-14T22:51:41.357

66

Bootstrap has it's own centering class named text-center.

<div class="span7 text-center"></div>

edited Aug 14 '15 at 22:51

answered Jul 19 '13 at 12:15

Lucas Santos

1,359
3
24
43

Best answer uses the API – Subtubes Mar 05 '15 at 01:24
Just too bad that it doesn't work with `
` !
– TOPKAT Jun 10 '16 at 23:59

score 30 · Answer 2 · edited May 23 '17 at 11:46

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.

Even better you could use bootstraps `text-center` class and not have to write any css yourself. for example `
` — mildog8, May 17 '14 at 23:30

score 18 · Answer 3 · answered Jan 13 '14 at 13:28

18

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

answered Jan 13 '14 at 13:28

Vladimir Dimchev

219
3
3

This worked for me, my button will remain centered even with the viewport causes Bootstrap to put the button on the nextline. '

' – Chris Everitt Feb 12 '14 at 21:37

score 11 · Answer 4 · answered Jan 21 '14 at 01:18

11

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

answered Jan 21 '14 at 01:18

TimNguyenBSM

817
2
15
33

1

Problem is that this makes the button width fill its container as well – scrowler Jun 17 '14 at 03:01
This worked just fine for me, but only when using a form – Malkierian Dec 01 '15 at 05:25

score 4 · Answer 5 · answered Dec 25 '13 at 16:25

4

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

answered Dec 25 '13 at 16:25

Steve

1,182
1
11
25

Why force the element to appear block-level. Better use Bootstraps build in solutions – rakeden Feb 24 '15 at 13:17

score 3 · Answer 6 · answered Jan 11 '13 at 05:03

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

score 1 · Answer 7 · answered Aug 15 '15 at 04:06

1

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>

answered Aug 15 '15 at 04:06

Rusty

4,138
3
37
45

score 1 · Answer 8 · answered Jun 23 '16 at 18:37

1

Bootstrap have a specific class for this: center-block

<button type="button" class="your_class center-block"> Book </button>

answered Jun 23 '16 at 18:37

Gregory

6,514
4
28
26

Centering a Twitter Bootstrap button

8 Answers8

Linked