Unable to center div on bootstrap 3

Question

I'm unable to center a lot of div since I upgrade my bootstrap from 2.1 to 3.0

For example with this code:

<div id="center" class="container">
    <div class="row">
        <div class="btn-toolbar">
            <div class="btn-group">
                <a class="btn btn-default" href="#">test</a>
            </div>
        </div>

        <br />

        <p>Am I centered ?</p>
        <a class="btn btn-default" href="#">Back</a>
    </div>

</div>

I had this rule:

#center {
    margin: 0 auto;
}

But the result is: enter image description here

Or another example, how to center this:

<div id="center" class="container">
    <div class="row">
        <li class="col-md-5">
            <ul class="list-unstyled">
                <li><i class="icon-user"></i> aaaaaaaaa</li>
                <li><i class="icon-envelope"></i> bbbbbbbbbb</li>
                <li><i class="icon-envelopebug"></i> cccccccccccc</li>
            </ul>
        </li>
        <li class="col-md-5">
            <ul class="list-unstyled">
                <li><i class="icon-user"></i> aaaaaaaaa</li>
                <li><i class="icon-envelope"></i> bbbbbbbbbb</li>
                <li><i class="icon-envelopebug"></i> cccccccccccc</li>
            </ul>
        </li>
    </div>
</div>

enter image description here

Thank you for your help

Adrift · Accepted Answer · 2013-09-26T23:40:38.897

10

In order to center a block level element using margin: 0 auto; it must also have a width that is smaller than its containing block (for the auto value to make sense) - because #container is spanning the width of its parent (the <body>) there is simply no margin to distribute.

An alernative approach to margin: 0 auto; would be to set .btn-toolbar to inline-block and then centering it by adding text-align: center; to its containing block. You can apply the same concept to the second example:

http://fiddle.jshell.net/52VtD/94/

edited Sep 26 '13 at 23:40

answered Sep 26 '13 at 23:11

Adrift

58,167
12
92
90

Thank you it works great for the button but I have a question with the list. How is it possible to have the same result but without the centered text :) http://fiddle.jshell.net/52VtD/99/ – ZazOufUmI Sep 27 '13 at 07:15

score 4 · Answer 2 · edited May 23 '17 at 11:53

In this instance, margin:0 auto doesn't work because the width of the element is 100%. If you want it to work, you would have to set a width on the element:

.btn-toolbar {
    width: 50px;
    margin: 0px auto;
}

If you want to center the text and the button, you could add the class text-center to the parent element, in this case: .row. The styling of this class is simply text-align: center.

<div class="row text-center">
  ..
</div>

EXAMPLE HERE

As @Adrift points out, it would be much more efficient to center the element by making it inline-block, as you can use text-align:center as opposed to margin:0 auto and avoid having to set a fixed width on the element. This will ensure that the element is centered regardless of its width. (example here) - don't forget you can just add the class text-center to the parent for centering.

It's also worth noting that inline/inline-block elements respect white-space in the markup, and thus generate space if present. If you want to remove this space, see this answer.

As you suggests, I followed the solution of @Adrift but thank you for the explanations ;) — ZazOufUmI, Sep 27 '13 at 06:53

Unable to center div on bootstrap 3

2 Answers2

Linked