Bootstrap 3 responsive centered columns

An easy solution to center multiple columns in Bootstrap 3, also on mobile

The Problem

Sometimes you want to center Bootstrap columns, usually when you have an uneven number of them, or when you give them a max-width and they don't fill up the containing row.

The Solution

Demo

Demo and source code

The Markup

Just add the class .row-centered to the row and .col-centered to the columns.

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
    </div>
</div>

The Css

This simple css code centers the columns (.col-centered) inside the row (.row-centered).

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

You can also set a min-width, a max-width or a fixed width to the columns.

.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}