Perfect center align horizontally with Bootstrap

Question

There are some options I can choose from when it comes to horizontal center alignment with Bootstap.

I can either use offset class or use blank span class as a placeholder. One other option can be using custom alignment like the following

.center {
    float: none;
    margin: 0 auto;
}

None of these options solve my issue because the content of the div container has to fill up the width by 100%.

Let's say I have the following

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span4 offset4">
        <button class="btn">1-1</button>
        <button class="btn">1-2</button>
      </div>
    </div>
</div>

If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.

Here I have a canvas to play with. JS BIN

Adding your `.center` class should work. What happens when add that class to the buttons? — Chris Herbert, Sep 24 '13 at 23:57
This question is out-of-date for 3.x and 4.x see: http://stackoverflow.com/a/42483682/171456 — Carol Skelly, Apr 04 '17 at 18:33

omma2289 · Answer 1 · 2013-09-25T00:09:07.863

7

Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:

HTML

<div class="row-fluid">
  <div class="span4 offset4 text-center">
    <button class="btn">1-1</button>
    <button class="btn">1-2</button>
  </div>
</div>

Updated demo: http://jsbin.com/ayuFEhO/2/edit

edited Sep 25 '13 at 00:09

answered Sep 25 '13 at 00:02

omma2289

54,161
8
64
68

score 2 · Answer 2 · answered Sep 25 '13 at 00:04

2

You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit

Obs: text-center class already exist on twitter's bootstrap code.

answered Sep 25 '13 at 00:04

Vinícius Moraes

3,506
2
22
24

Perfect center align horizontally with Bootstrap

2 Answers2