Unable to center multiple col's in bootstrap 3

Question

I'm trying to center 7 inline columns within a row that I created using bootstrap. I've tried every solution that I could find (except for absolute positioning, which I don't want). My original plan was to add an extra container div around the list of col-md-1 divs, but when I do, the div is sets its self to fit 100% of the row rather than only 100% of the width of all the cols. My code is as follows:

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12" style="background-color: pink;">
            <div class="row">
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.container .row .col-md-12 .row {
    text-align: center;
}
.col-md-1 {
    width: 125px;
    height: 80px;
    margin-right: 7px;
    background-color: #E6E6E6;
    display: inline-block;
}
.col-md-1:last-child {
    margin-right: 0;
}

Also, here is a bootply:

http://www.bootply.com/116478

Answer 1

This is because the default style adds float: left; to the columns as can be seen on the following snippet:

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

From my point of view, the best way to center a column would be to use offset. This will prevent you from causing unexpected bevavior of the Bootstrap's grid.

Answer 2

What browser support do you need? If can live without IE9- it is easy to do with Flexbox:

http://www.bootply.com/116480

.container .row .col-md-12 .row {
    display: flex;
    justify-content: center;
}

Of course, the reality is not that simple. You need the -webkit- prefix for Safari, a different syntax for IE10 (IE11 uses the modern syntax) and a different syntax again for old versions of Firefox (with -moz- prefix) and Safari/Chrome (-webkit). Just pick and choose depending on how far back you need to go.