How do you get centered content using Twitter Boot

Question

I'm trying to follow a very basic example. Using the starter page and the grid system, I was hoping the following:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

...would produce centered text.

However, it still appears on the far left. What am I doing wrong?

Answer 1

As of February 2013, in some cases, I add a "centred" class to the "span" div:

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

and to CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

The reason for this is because the span* div's get floated to the left, and the "auto margin" centering technique works only if the div is not floated.

Demo (on JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

Answer 2

For Bootstrap version 3.1.1 and above, the best class for centering the content is the .center-block helper class.

Answer 3

This is for Text Centering (which is what the question was about)

For other types of content, see Flavien's answer.

Update: Bootstrap 2.3.0+ Answer

The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, you can simply give the div the class .text-center.

---

Original Answer (pre 2.3.0)

You need to define one of the two classes, row or span12 with a text-align: center. See http://jsfiddle.net/xKSUH/ or http://jsfiddle.net/xKSUH/1/

Answer 4

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

Do not use container-fluid in the main.

Answer 5

If you use Bootstrap 3, it also has built-in CSS class named .text-center. That's what you want.

<div class="text-left">
    left
</div>

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

<div class="text-right">
    right
</div>

Please see the example in jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Answer 6

You need to adjust with the .span.

Example:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>