WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Center a Column in Bootstrap

Topic: Bootstrap / SassPrev|Next

Answer: 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>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.