Nesting columns good practice? - html

Question

I am unable to find any rules as to whether or not this is something that should be done. Bootstrap clearly outlines amongst its rules the following:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be
immediate children of rows
So from this I conclude that each section of the website that I do want self-contained would have a container class. Within this we'd have a row and within that we'd have a column. Like so:
<div class="container">
<div class="row">
<div class="col">COL 1 of 2</div>
<div class="col">COL 2 of 2</div>
</div>
</div>
Now my question is, the rules specify that only columns may be immediate children of rows but it doesn't say what the children of columns should be. If I was to want to "nest" another set of double columns within another column, would I write it like in case one or case two?
<div class="container">
<div class="row">
<div class="col"> <!--Columns within columns without a row-->
<div class="col">
<div class="col">
</div>
<div class="col"> <!--Row nested before nesting columns-->
<div class="row">
<div class="col">
<div class="col">
</div>
</div>
</div>
</div>
Both work in terms of actually making the page, but I do not know what is considered "good practice". There are obviously limitations to both ways of writing things. In my case, I'd want the "column" to be filled with a dynamically generated amount of elements, which on different screen resolutions/responsive sizes would be aligned, so a row wrapper is not an option. I do not know how many elements per row I'd have, which would make the following rows break and wrap when it is not needed.
So, is it okay to nest columns within columns without a row to hold the children?

Answer 1

You should put any nested .rows inside of a .container to contain the negative margins, and only nest a .col inside of a .row:
<div class="container">
<div class="row">
<div class="col"> <!--Row nested before nesting columns-->
<div class="container">
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
</div>
</div><!-- .container -->
</div>
</div>
</div>

Answer 2

Nested rows are better semantically and in some edge cases to maintain the design. This is however opinion but opinion that's based on best practice.
I'd put the row before for the column just to be clear on your intent and to make it more modular.
It's best to think about it as a module and ask yourself "Can I lift this section of markup out of its position and put it anywhere else on the page and it still hold its form?" By encapsulating it within a row, you can answer yes to that question. Of course its always a battle between only putting in mark-up that is necessary and being modular but with concepts such as SMACSS, Object Oriented CSS etc... taking the lead in how we think about structuring our markup and CSS its seems consensus is with a bit of extra markup in order to maintain modularization.