Dynamically adding blocks of information to a page

Question

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.

• Jamal: Please just have the latest version of your code here, since there are not yet any answers.
• rolfl: @Jeroen - Jamal was absolutely correct to close your triple-question - having 3 versions of your code in one post is very unclear, and the comment he left clearly informed you what you should do to rectify that, which you have now done.

Answer 1

Yes, it's fine to do. Rows are only used to create groups of horizontal content. In your case, your grid would wrap around (which you may want to consider is what you really want), but this is how responsive grids of photos are generally created.

Answer 2

This is a good approach to use unless you have grid items with different height. The complete layout would be disturbed when you have items with varying height (some items with larger height).