2 ways to center a column in Twitter Bootstrap 3

Here are 2 ways which you can use whenever you need to center a column div within `.container` in Twitter Bootstrap 3 as well as to keep empty space outside the div to be evenly distributed. First approach uses offset feature available in Bootstrap while it has a limitation and second approach is using `center-block` class with setting `float: none` in Twitter Bootstrap.

Center a column in Twitter Bootstrap 3

Way 1: Using offset classes

In this way we don’t need any extra markup or CSS rule. Key is to use Bootstrap’s own offsets classes and is to set an offset equal to half of remaining size of the row. For example, a column of size 2 would leave space for 10 columns in the row as Bootstrap’s row is divided into 12 columns of equal size. So we can center this column by adding an offset of 5 `(12-2)/2`.

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT HERE
        </div>
    </div>
</div>

Now, there’s an obvious drawback for this method, it only works for even column sizes to shift it equally half/center, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported as you can see in table below:

Offset = (12 – our_column_size)/2

Way 2:  using center-block class with float: none

We can center any column size using proven `margin: 0 auto;` CSS rule which is already shipped with Bootstrap’s center-block class, you just need to add `float: none;` to make it work with grid system provided in Twitter Bootstrap 3.

/* Rule */
.center-float {
    float: none;
}


<!--HTML-->
<div class="container">
    <div id="mydiv" class="center-block center-float" style="width:70%;">
        YOUR CONTENT HERE
    </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.