6

I was wondering if my nested row can add up to more then 12? Is it wrong to work this way?

I tried it and it seems to work fine for me, but I want to make sure that I am doing this right.

For an example can I have this? 

<div class="col-md-10">
 <div class="container">
  <div class="row">   
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
 </div>
</div>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Chris Drew
  • 61
  • 1
  • 3

2 Answers2

7

Yes, it's ok to have more that 12 columns in a row It will just make the extra columns wrap to the next line. So, with your example you'd have 2 rows of 4.

http://bootply.com/91392

From the Bootstrap docs (http://getbootstrap.com/css/#grid)..

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

Also, here are some examples that show using more than 12 columns (col-*) in a single row: http://getbootstrap.com/css/#grid-example-mixed

Just be aware of responsive resets if the columns vary in height. Read more about when to use Bootstrap row

Related questions:
Bootstrap what will happen if I put more than 12 columns in a row?
Bootstrap 3 - Use more than 12 columns in a row
Where to place bootstrap row class
Boostrap row on multiple lines

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

If you want to do that this way then you have to set the heights of the columns inside, because if your columns have different heights than then the column that exceeds the 12 column grid will break the layout.

This is what I've found through experience. Therefore, I advice you to never have more than 12 'column' in your row. So in your case I think it should be like this:

<div class="col-md-10">
 <div class="container">
  <div class="row">   
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
  <div class="row">
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
   <div class="col-md-3"> ... </div>
  </div>
 </div>
</div>
user3034378
  • 89
  • 1
  • 7
  • yea but with little extra css you can avoid variable height issue while keeping elements in same row... i.e `.col-md-3:nth-child(4n+1){ clear: left; }` – Imran Bughio Aug 26 '16 at 14:45
  • 2
    It's ok to exceed 12 units in a `row` tag. It's known as [column wrapping](http://getbootstrap.com/css/#grid-example-wrapping) – Carol Skelly Sep 25 '16 at 11:32