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

I tried two ways, and it worked fine to center the div. Both the ways will align the divs on all screens.

Way 1: Using Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

Way 2: Using Offset:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

Result:

Explanation

Bootstrap will designate to the left, the first column of the specified screen-occupancy. If we use offset or push it will shift the 'this' column by 'those' many columns. Though I faced some issues in responsiveness of offset, push was awesome.

Answer 2

If you are using Bootstrap 2.0+

This can make the div centered to the page.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

Answer 3

Simply use a class, text-center, for the div or tag which you want. I think it may work fine. It is a Bootstrap class for text align center.

Here are some text alignment Bootstrap classes:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

Answer 4

You can use any one of the below types

1. Use the Bootstrap existing class text-center.
2. Adding a custom style, style = "text-align:center".

3. Use a column offset:

   Example: <div class="col-md-offset-6 col-md-12"></div>

Answer 5

I guess most of the people here are actually searching for the way to center the whole div and not only the text content (which is trivial…).

The second way (instead of using text-align:center) to center things in HTML is to have an element with a fixed width and auto margin (left and right). With Bootstrap, the style defining auto margins is the "container" class.

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Take a look here for a fiddle: http://jsfiddle.net/D2RLR/7788/