Responsive Centered Bootstrap Columns


I see this being repeated over-and-over again to create centered content with bootstrap columns:

 .container
   .row
     .col-md-offset-3.col-md-6
       Centered Column

Leaving you only to work with even-numbered columns for perfectly centered content inside a bootstrap column:

 .col-md-offset-2.col-md-8
 .col-md-offset-3.col-md-6
 .col-md-offset-4.col-md-4

Foundation has built-in centered columns, so here’s a way to create centered bootstrap columns.

 // SCSS
 .col-center {
   float: none;
   margin-right: auto;
   margin-left: auto;
 }

 // HAML
 .container
    .row
       .col-md-5.col-center

To see this in action, just take a look here

Sidenote: this works with Bootstrap 3.