Centering columns in Bootstrap 3

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.