I have code that dynamically adds blocks of information to my page. I don't know in advance how many blocks there will be. I want to utilize Twitter Bootstrap (3.x) to layout them in three columns (e.g. I want to use col-xs-4).
Bottom line: is it okay to add col-* elements to a container without wrapping them in row elements?
I currently generate this markup:
.my-box {
margin: 5px;
padding: 5px;
background-color: #fed;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<!-- This will be added dynamically, the number of blocks is determined run-time. -->
<div class='col-xs-4'><div class='my-box'>One</div></div>
<div class='col-xs-4'><div class='my-box'>Two</div></div>
<div class='col-xs-4'><div class='my-box'>Three</div></div>
<div class='col-xs-4'><div class='my-box'>Four</div></div>
<div class='col-xs-4'><div class='my-box'>Etc.</div></div>
</div>
</div>I'm looking to get feedback on the above bit of code. (I've omitted the bit that generates the divs for brevity as well as the fact that I'm not necessarily looking for feedback on that bit. Ping me in a comment if you do think the way its generation is important.)
Things I've researched:
This seems to work fine, rendering just the way I want it to. However, this seems to go against common-sense semantics of rows and columns.
So I checked the Grid System documentation for Bootstrap, but it is unclear as to whether it is or isn't required to wrap col-* elements inside a row or not. Nowhere is it stated as an explicit requirement, but on the other hand the examples do wrap column elements in rows without exception.
