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 wont work. Some times you need to center a column count that does not devide evenly by 12. You are also breaking the grid columns but lets asume 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.

Hope this helped!



Signup for my mailing list

Receive other rambings like this on design, code, and some times food.