Categories
css html javascript twitter-bootstrap

How to split up Bootstrap row width equally between columns

I have a page with a bootstrap row, which contains several col-md-1 Bootstrap columns (the amount can vary but never exceeds 12). In this JSFiddle you can see an example of what I mean.

Currently if I have four columns (like in my fiddle), they float left and do not use up the full width of the row:

enter image description here

  <div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
...
</div>

What I want to have, is that the columns keep the same width as above, however they get spread out equally throughout the row. Remember, there can be any number of col-md-1s between 1 and 12! The result width four columns should look something like this:

enter image description here

Further requirements and information:

  1. I’m using this in my AngularJS application, so I’d prefer non-jQuery
    solutions
  2. If it’s in anyway possible, IE9+ support would be nice!

Since you want to have dynamic number of columns, flexbox is the best way to go.

As you required, it supports IE10+

.row {
border: 1px solid gray;
display: flex;
justify-content: space-between;
/* Adding for cross browser support */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.col-sm-1 {
border: 1px solid lightblue;
background: lightblue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
</div>
<br>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>

<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
</div>
</div>