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

Bootstrap 2.3 has a text-center class.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Answer 2

My preferred method for centering blocks of information while maintaining responsiveness (mobile compatibility) is to place two empty span1 divs before and after the content you wish to center.

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

Answer 3

The class .show-grid is applying center aligned text in the example in the link.

You can always add style="text-align:center" to your row div or some other class I would think.

Answer 4

NOTE: this was removed in Bootstrap 3.

---

Pre-Bootstrap 3, you could use the CSS class pagination-centered like this:

<div class="span12 pagination-centered">
    Centered content.
</div>

Class pagination-centered is already in bootstrap.css (or bootstrap.min.css) and has the only one rule:

.pagination-centered{text-align:center;}

With Bootstrap 2.3.0. just use class text-center

Answer 5

Bootstrap 3.1.1 has a .center-block class for centering divs. See: http://getbootstrap.com/css/#helper-classes-center.

Center content blocks Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>

Or, as others have already said, use the .text-center class to centre text.

Answer 6

Center-block is also an option not referred in above answers

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from, so it will not center itself as anticipated.

So text-center is a better option.