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.

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.

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.