Horizontally centered Bootstrap columns - css

Question

JSFIDDLE
I have a case where I want my bootstrap columns to horizontally center themselves.
To achieve this, I have used the following rules
CSS:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
Then If 4 columns are there they should come in a line. And if there are 3 columns then they should be centered.
HTML:
<!-- The fourth column falls down -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
It works fine if I have just 1,2 or 3 columns but when I get 4 columns, one of the columns falls down to a new line. To solve this issue, I have tried reducing the width to say 24.7%. But again this does not work in all screens. So I have to keep changing the width.
I would love to know why width 25% is not taking the 25% width and falling down. And how to solve this issue and keep them always in the center.
JSFIDDLE

Answer 1

You should create a special class (ie: row-centered) for this case, and not override the Bootstrap grid.
.row-centered > div {
display: inline-block;
float: none;
}
http://www.codeply.com/go/EXmotvfGtG

Answer 2

Please remove:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
and you can add to the .row class:
.row {
display: flex;
justify-content: center;
}
If you're using bootstrap v4 there are added flexbox classes, which you can use:
https://v4-alpha.getbootstrap.com/utilities/flexbox/

Answer 3

Give display: flex to the row. Using this method will work in all screens.
Fiddle
div[class^=col-] {
float: none;
display: inline-block;
vertical-align: top;
width: 25%;
}
body {
color: white;
}
.row {
margin-bottom: 50px;
display: flex;
}
.col-1 {
background: red;
}
.col-2 {
background: blue;
}
<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/23502342/1366033'>Bootstrap 3 grid, does it *really* matter how many columns are in a row?</a><br/>
Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>