How to Get Centered Content Using Twitter Bootstrap

How do you get centered content using Twitter Bootstrap?

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/

Center Form using Twitter Bootstrap

You need to include your form inside a container, the bootstrap already comes with a container class that is width:940px so you can wrap everything inside and it'll center automatically, like so:

<div class="container">
    <div class="row">
        <div class="span12">
            <form class="form-horizontal" method="post" action="/form/">
                <fieldset>
                    <legend>Please login</legend>
                    <div class="control-group">
                        <label class="control-label" for="id_username">Username</label>
                        <div class="controls">
                            <input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="id_password">Password</label>
                        <div class="controls">
                            <input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

Center a column using Twitter Bootstrap 3

There are two approaches to centering a column <div> in Bootstrap 3:

Approach 1 (offsets):

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.

In markup this would look like:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Now, there's an obvious drawback for this method. It only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8, and col-X-10 are supported.

Approach 2 (the old margin:auto)

You can center any column size by using the proven margin: 0 auto; technique. You just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:

.col-centered{
    float: none;
    margin: 0 auto;
}

Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Note: With both techniques you could skip the .row element and have the column centered inside a .container, but you would notice a minimal difference in the actual column size because of the padding in the container class.

Update:

Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto, but is missing float:none, you can add that to your CSS to make it work with the grid system.

How can I center elements horizontally or vertically with Twitter Bootstrap?

Update: while this answer was likely correct back in early 2013, it should not be used anymore. The proper solution uses offsets, like so:

class="mx-auto"

As for other users suggestion there are also native bootstrap classes available like:

class="text-center"
class="pagination-centered"

How to center content in a Bootstrap column?

Use:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

instead of

<div class="col-xs-1 center-block">

You can also use bootstrap 3 css:

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 now has flex classes that will center the content:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

Note that by default it will be x-axis unless flex-direction is column

Centering right .span9 content in Twitter Bootstrap?

Update : Bootstrap supports fluid offsets since 2.1.0 (or around that). See the Fluid Offseting doc

There is no offset in the fluid grid. Check this one : Offset Margin-Left Percentages for Fluid Row in Bootstrap

And secondly, if you put some content in the .span4 that overflows, the centering will only be applied to the .span4 container. You should fix the content width too (i.e. .control-group and .control).

If you prefer the easy way, you can keep the grid static (non-fluid) and use .offsetX classes or margin-left: auto; margin-right: auto;.

How do I center Glyphicons horizontally using Twitter Bootstrap

All you need is to define display:block with text-align:center in the i inside your container div and you'll have it:

.col-lg-4 i {
    display:block;
    text-align:center
}

Here is a demo

EDIT #1: As this answer seems to get some traction, it is worth to note that the more "twitter-bootstrapy" way of doing this would be what @SimoneMelloni suggested in their answer to this question, ie. the use of the text-center class.

Note that this is basically the same as my solution, considering all text-center does is set text-align:center, it is just making use of a twitter bootstrap feature.

Also note that text-align:center only works on block-level elements or ones where you explicitly set display:block, as in my original answer above. There I needed to specify that because I used it on the i tag, which is an inline element.

EDIT #2: I just saw your [OP] edit on the center element: while it is indeed not CSS but HTML, that's less of an issue, the bigger issue with it is that it's obsolete. See more info on it on MDN's doc on the <center> element

Centering a column with Twitter bootstrap not working

Everything is perfect but a little bit of css is required, bootstrap is not going to help you in centering your content of div

In the row class i have added this css property

display: table; margin: 0 auto;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">      <div class="container">    <div class="row" style="display: table; margin: 0 auto;">      <div class="col">        <div class="card" style="width: 18rem;">          <div class="card-header">            <h4 class="mb-0">Register</h4>          </div>          <div class="card-body">
            <form [formGroup]="heroForm" #formDir="ngForm" (ngSubmit)="onSubmit(heroForm.value)">
              <div [hidden]="formDir.submitted && heroForm.valid">
                <div class="cross-validation"                  [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">                  <div class="form-group">                    <label for="name">User Name</label>                    <input id="username" type="text" class="form-control" formControlName="username" required>                    <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">                      <div *ngIf="username.errors.required">                        Name is required.                      </div>                      <div *ngIf="username.errors.minlength">                        Name must be at least 4 characters long.                      </div>                    </div>                  </div>
                  <div class="form-group">                    <label for="name">Email</label>                    <input id="email" type="email" class="form-control" formControlName="email" required>                    <div *ngIf="email.invalid && (password.dirty || password.touched)" class="alert alert-danger">                      <div *ngIf="email.errors.required">                        Email is required.                      </div>                      <div *ngIf="email.errors.email">                        You must enter a valid email address                      </div>                    </div>                  </div>
                  <div class="form-group">                    <label for="password">Password</label>                    <input id="password" type="password" class="form-control" formControlName="password" required>                    <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">                      <div *ngIf="password.errors.required">                        Password is required.                      </div>                      <div *ngIf="password.errors.minlength">                        Password must be at least 4 characters long.                      </div>                    </div>                  </div>                </div>
                <button class="button" type="submit">Register</button>              </div>            </form>
            <div class="submitted-message" *ngIf="formDir.submitted && heroForm.valid">              <p>You've registered your with user {{ heroForm.value.username }}!</p>            </div>          </div>        </div>      </div>    </div>  </div>