How to Center Bootstrap Columns

Sometimes you want to center the columns when using Bootstrap.  I was using only like 3 columns of varying sizes, but I wanted to get them centered. So here’s how I did it, with all credit going to minimit and this article.

Add the .row-centered class to your rows and the .col-centered class to the columns in your html.

And here’s the css for those classes:

/* 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;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: