Previously I had talked about centering columns in Bootsteap 2. But how do we go about doing the same with Bootstrap 3?
/* Center columns at different breakpoints */
.col-centered{
float: none;
margin: 0 auto;
}
This approach is actually a lot cleaner and intended only for instances where offsets won’t work. Sometimes you need to center a column count that does not divide evenly by 12. You are also breaking the grid columns but let’s assume that you have a good reason.
<div class="row">
<div class="col-md-12">
.col-md-12
</div>
</div>
<div class="row" style="background-color: #00b3ee">
<div class="col-md-6 col-centered" style="background-color: #7a43b6">
.col-md-6
</div>
</div>
<div class="row" style="background-color: green">
<div class="col-sm-5 col-centered" style="background-color: red">
Upper Content
<div class="row">
<div class="col-md-6" style="background-color: #7a43b6">
.col-md-6
</div>
<div class="col-md-6" style="background-color: #7a43b6">
.col-md-6
</div>
</div>
Lower Content
</div>
</div>
Adding col-centered
to your containing columns and then adding extra row + columns inside of them will give you a new grid space to work from. Media breakpoints also work as expected to allow you to control how your content will flow on different devices.
Hope this helped, I know that it has saved me a lot of headaches in the past.