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

Solution 1:

You can use offset method

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

Try this,, this may help you DEMO

Solution 2:

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"  />
<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>

Solution 3:

Yo can do this just with bootstrap and css pushing the columns.

One possible solution can be:

Html:

<div class="container">
  <div class="row col-sm-10 col-sm-push-1">
    <div class="col-sm-1"></div>
    <div class="col-sm-1 col-sm-push-1"></div>
    <div class="col-sm-1 col-sm-push-2"></div>
    <div class="col-sm-1 col-sm-push-3"></div>
  </div>
</div>

css:

body {
    margin: 10px;
}

.row {
    border: 1px solid red;
    padding: 0 4%;
}

.col-sm-1 {
    border: 1px solid blue;
    padding: 50px;
}

Demo