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:
Example
Try this code »<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:
Example
Try this code »<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:
Example
Try this code »<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:
Example
Try this code »/* 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:
