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

Update 2018:

In Bootstrap 4.1.3, content can be centered using class mx-auto.

<div class="mx-auto">
  Centered element
</div>

Reference: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering

Answer 2

Update 2018 - Bootstrap 4

"Centered content" can mean many different things, and Bootstrap centering has changed a lot since the original post.

Horizontal Center

Bootstrap 3

• text-center is used for display:inline elements
• center-block to center display:block elements
• col-*offset-* to center grid columns
• see this answer to center the navbar

Demo Bootstrap 3 Horizontal Centering

Bootstrap 4

• text-center is still used for display:inline elements
• mx-auto replaces center-block to center display:block elements
• offset-* or mx-auto can be used to center grid columns
• justify-content-center in row can also be used to center col-*

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

Demo Bootstrap 4 Horizontal Centering

---

Vertical Center

Now that Bootstrap 4 is flexbox by default there are many different approaches to vertical alignment using: auto-margins, flexbox utils, or the display utils along with vertical align utils. At first "vertical align utils" seems obvious but these only work with inline and table display elements. Here are some Bootstrap 4 vertical centering options..

---

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

---

2 - Vertical Center with Flexbox:

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

---

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo

Answer 3

Any text-align utility class would do the trick. Bootstrap has been using .text-center class for centering text for a long time now.

.text-center { text-align: center !important; }

Or you can create your own utilities. Some variations I've seen over the years:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

Answer 4

I created this class to keep the centered regardless of screen size while maintaining responsive features:

.container {
    alignment-adjust: central;
}

Answer 5

The best way to do this is define a css style:

.centered-text {
    text-align:center
}    

Then where ever you need centered text you add it like so:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

or if you just want the p tag centered:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

The less inline css you use the better.

Answer 6

On my side I define new CSS styles ready to use and easy to remember:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

Is it a good idea? Is there any good practice for this?