d3ygia
Last Updated: September 25, 2016
·
333
· glebkema
Gleb kemarsky 141130 voronov 02 x100

Five equal columns in Bootstrap 3 (one row, one CSS property)

The solution with nested rows works good, but imho the issue can be solved more easily.

Bootstrap's classes for columns differ only by the width property. So we can just redefine this property for our purpose. It would be enough.

@media (min-width: 768px) {
  .ten-columns > .col-sm-2 {
    width: 20% !important;
  }
}

<div class="container-fluid">
  <div class="row ten-columns">
    <div class="col-sm-2">1</div>
    <div class="col-sm-2">2</div>
    <div class="col-sm-2">3</div>
    <div class="col-sm-2">4</div>
    <div class="col-sm-2">5</div>
  </div>
</div>

Check the result: http://codepen.io/glebkema/pen/LRWpBm

Say Thanks
Respond