Bootstrap how to foreach with columns inside - php

Question

I have a foreach and I want to place 4 columns then break in a new row and start again but for some reason i got the column number 5(test2) bad pushed like this picture:
should be like this:
here is the code to generate that:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Secciones
</div>
<div class="panel-body">
<div class="row">
#foreach ($boards as $board)
<div class="col-md-3">
<h3>{{$board->boaName}}</h3>
#foreach ($subboards as $subboard)
#if($subboard->boaId == $board->id)
<ul>
<li>{{$subboard->subboaName}}</li>
</ul>
#endif
#endforeach
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div><!--End container-->

Answer 1

Try moving the foreach loop outside of the <div class="row">? If that doesn't work do you think you could mock this up in a jsFiddle example?

Answer 2

You need a test after 4 iterations to close and open again the row div.

Answer 3

If you know how many columns to expect, you could do the following (I've ommited your inner content of each column for my example - I've also left the counter in so you can see the incrementation for testing):
$i = 1;
foreach($boards as $board) {
if($i == 1 || $i == 5 || $i == 9) {
echo "<div class='row'>";
echo "<div class='col-md-3'>" . $i++ . "</div>";
}
elseif($i%4 == 0) {
echo "<div class='col-md-3'>" . $i++ . "</div>";
echo "</div>";
} else {
echo "<div class='col-md-3'>" . $i++ . "</div>";
}
}
What's happening here is if the column count is the 4th iteration, it should echo out an opening <div class="row"> as well as a column. If the current column is divisible by 4, it should echo out a column with an extra closing </div> (to close the row class.)
If the current count is neither of the above, it simply echo's out a column.
You can, of course, mod the above if the amount of potential columns is unknown.