Where to place bootstrap row class

Question

Im fairly new to bootstrap and the concept of responsive design.

I was reading over the bootstrap docs and following some tutorials on w3schools. All mentions

Answer 1

Your code is correct and doesn't need more .rows. The W3schools tutorial is misleading, and it's wrong to say ".col-*-* should always add up to 12 for each row".

It's ok to have more (or less) than 12 column units in a Bootstrap .row. It's known as column wrapping, and will simply make the extra columns wrap to the next line...

From the Bootstrap docs:

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

That's why there are examples in the Bootstrap docs that demonstrate using more than 12 columns in a single .row. When using column wrapping you do need to be aware of responsive resets (known as "clearfix") if the columns vary in height.

There are many responsive scenarios (like your example) where it's necessary to have column units exceeding 12 in a single .row element. It's a common misconception that column units must be 12 or less in a single .row.

Similar Questions..

Bootstrap what will happen if I put more than 12 columns in a row?

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