How to Center a Column in Bootstrap

Use the mx-auto Class

If you are using the Bootstrap 4 version, you can horizontally center a grid column by applying the class .mx-auto on it. Let's try out the following example to see how it works:

<div class="container">
    <div class="row">
        <div class="col-sm-6 mx-auto">
            <!-- Column content -->
        </div>
    </div>
</div>

Alternatively, you can also apply the class .justify-content-center on the .row element to center the column horizontally. Let's check out the following example:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <!-- Column content -->
        </div>
    </div>
</div>

But, in Bootstrap 3 things are little different. If the grid column number is even (e.g., 2, 4, 6, 8, 10, 12) you can use the class .col-{xs|sm|md|lg}-offset-* to align the column in center, like this:

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
            <!-- Column content -->
        </div>
    </div>
</div>

However, if the grid column number is odd (e.g., 1, 3, 5, 7, 9, 11) you have to use some custom CSS. Let's check out the following example to understand how it basically works:

/* CSS code */
.col-centered{
    float: none;
    margin: 0 auto;
}
 
<!-- HTML code -->
<div class="container">
    <div class="row">
        <div class="col-xs-7 col-centered">
            <!-- Column content -->
        </div>
    </div>
</div>