How To Center A Column In Bootstrap - Tutorial Republic

Trang chủ » Html Col Class » How To Center A Column In Bootstrap - Tutorial Republic

Có thể bạn quan tâm

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:

  • How to vertical align a DIV in Bootstrap
  • How to align responsive image in center in Bootstrap
  • How to align Bootstrap modal vertically center
Previous Page Next Page

Từ khóa » Html Col Class