17

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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
asleep
  • 179
  • 1
  • 1
  • 3

3 Answers3

25

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.

More than 12 column units inside a single row enables a layout to be responsive.

Read more about why more than 12 in a row is often necessary.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
12

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.
zessx
  • 68,042
  • 28
  • 135
  • 158
  • what if I only need a gird of size 18 to be used on a specific markup but leave the rest as is? – Piotr Kula Feb 24 '15 at 12:38
  • 3
    You'll need to do it manually I guess, Bootstrap comes with it's own limitations. But you still can keep a 12-cols template: use `.col-2` first, and you'll get 6 columns. Then, each column is divide in `.col-4` elements (= 3 columns). Thus you get 3*6 = 18 columns (equal size). – zessx Feb 24 '15 at 14:42
  • 1
    Thanks. I just found out that even though its 12 columns I can add more than 12 columns without defining a new row. It will wrap the columne to a new line. I didnt know you could do that but that is good enough for me because changing the column size to 18 might work on my display but then wont on a phone, or tablet, or a TV. So if we using bootstrap this will fit to the screens space and I think the hard codded grid of 12 is irrelevant in this case. I just define it as `col-lg-1` even if I have 100 divs like that. BootStrap sorts it out, in the wrapping col size. – Piotr Kula Feb 24 '15 at 14:46
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;
Sachin Kanungo
  • 1,054
  • 9
  • 17