Bootstrap 3 - Use more than 12 columns in a row

I ran into a situation where I was required not to limit the number of columns in a row since potentially multiple blocks of content would be added to the area from places in the admin.

By default BS3's behavior tells 12 column divs not to float which causes them to go over the top of the smaller floated divs. So I've written an override as a class for my system and thought I would share in case anyone else has the issue.

If anyone has a better idea or suggestion I would love to feel like I'm not hacking Bootstrap ... but here's how I solved it.

  /* col-xs float fix for large column groups */  
  .large-group .col-xs-12 {
    float: left;    
  }

  /* col-sm float fix for large column groups */    
  @media (min-width: 768px) {    
    .large-group .col-sm-12 {    
      float: left;    
    }    
  }

  /* col-md float fix for large column groups */    
  @media (min-width: 992px) {    
    .large-group .col-md-12 {    
      float: left;    
    }    
  }

  /* col-lg float fix for large column groups */    
  @media (min-width: 1200px) {
    .large-group .col-lg-12 {    
      float: left;    
    }    
  }

<div class="container">
  <div class="row large-group" style="background-color:#ebebeb;">    
    <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>    
    <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>    
    <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>    
  </div>    
</div>

Solution 1:

There is nothing wrong with using more than 12 column units in .row, and in fact the Bootstrap docs state:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

There are also examples in the docs that demonstrate why this "column wrapping" in necessary: https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping. It's ok to have more that 12 units in a single .row. tag, just remember you may need to use responsive resets. 12 units is a limit of the visual row (horizontally across the viewport), but not necessarily a .row div which is simply a grouping of columns.

Read more about the Bootstrap grid, and why more than 12 in a row is often necessary.

Solution 2:

Bootstrap was made for a 12-col usage.

If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables :

• @grid-columns: Number of columns in the grid.
• @grid-gutter-width Padding between columns. Gets divided in half for the left and right.

Solution 3:

If you need flexibility and responsiveness with large number of grids you can use dead-simple-grid https://github.com/mourner/dead-simple-grid and also try to minimize use of media queries in grids and let flow with

max-width:100%;
float:left;