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

<divclass="container"><divclass="row"><divclass="col-sm-1 col-sm-offset-1"></div><divclass="col-sm-1 col-sm-offset-1"></div><divclass="col-sm-1 col-sm-offset-1"></div><divclass="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;
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"  /><divclass="container"><divclass="row"><divclass="col-sm-1">1</div><divclass="col-sm-1">2</div><divclass="col-sm-1">3</div><divclass="col-sm-1">4</div></div><br><divclass="row"><divclass="col-sm-1">1</div><divclass="col-sm-1">2</div><divclass="col-sm-1">3</div><divclass="col-sm-1">4</div><divclass="col-sm-1">5</div><divclass="col-sm-1">6</div><divclass="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:

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

css:

body {
    margin: 10px;
}

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

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

Demo