Bootstrap - row can I have columns add up to more then 12?

Question

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

Answer 1

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>

Answer 2

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