Horizontally centered Bootstrap columns

Question

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

What version of Bootstrap are you using? `col-2` is only in Bootstrap 4. — Carol Skelly, Mar 21 '17 at 11:00
Oh. thanks for letting me know. I just used that as a custom class there — Kiran Dash, Mar 21 '17 at 11:25

score 3 · Accepted Answer · answered Mar 21 '17 at 10:43

3

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/

answered Mar 21 '17 at 10:43

Nadezhda Serafimova

722
1
13
21

Thanks for the answer. – Kiran Dash Mar 21 '17 at 10:47
Glad to help you :) – Nadezhda Serafimova Mar 21 '17 at 10:48
Yeah, if the bootstrap version is 4, its classes are recommended. Otherwise add the flex properties to your custom class, like .[prefix-]row-flex or similar, not to .row – Nadezhda Serafimova Mar 21 '17 at 11:21

score 2 · Answer 2 · answered Mar 21 '17 at 11:06

2

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

answered Mar 21 '17 at 11:06

Carol Skelly

351,302
90
710
624

score 1 · Answer 3 · answered Mar 21 '17 at 10:39

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>

Thanks for the answer. I guess with `display: flex`, the `display inline block` for the `cols` wont be necessary. — Kiran Dash, Mar 21 '17 at 10:47

Horizontally centered Bootstrap columns

3 Answers3