Grid alignment automatically into multiple rows - twitter-bootstrap-3

Question

I would like have it such that I can specify one row but have the program automatically split the result into multiple rows if required. I need to do it this way as I dynamic div content being populated so it needs to properly align accordingly. I am using bootstrap 3.
<div class="row">
<div class="col-md-4">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
</div>
</div>
End result would be: "one", "two", "three" on the first row.
"four", "five", "six" on the second row. "seven" on the third row.
Basically what I am looking for is a way for the bootstrap to automatically align with at most divs per row.

Answer 1

If i understood everything correctly you're using bootstrap not in the right way.
Every bootstrap row has 12 columns. These columns can be grouped.
Now you can group these columns for each device. Read more on the bootstrap 3 documentation.
For example:
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
This code aligns each number text (one, two, three ...) according to the size of your col-XX-Y. So on medium md sizes, you got 3 columns. On small sm sizes you have 2 columns etc.
This is based on the 12 columns (on total) divided by the number you specified in the col-XX-Y class.
Just remember:
The XX represents the screenwidth and the Y represents the columns you
want to group at this screenwidth.