Unable to center multiple col's in bootstrap 3

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

Answers


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.


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.


Need Your Help

Segmentation error in FCFS Scheduling code

c linux segmentation-fault system-calls

I was writing this code for FCFS scheduling. But in Linux this is giving

Why are background images in css expressed as url but images in img can just be the path to the file

html css url image

We had a designer do our html/css and while updating some code I noticed this:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.