Blade bootstrap foreach get nice-looking grid-system - css

Question

I'm having this piece of code in my Laravel's Blade view:
#foreach ($questions as $question)
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
#if(isset($question->task))
<h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4>
#endif
<blockquote >
<a class="nostyle" href="{{URL::action('showQuestion',$question->id)}}" ><p
#if($question->status==1)
class="text-success"
#endif
>{{$question->text}}</p></a>
<footer>Gevraagd door <strong>{{$question->Author->getFullName('mij') }}</strong> op <strong>{{DateConverter::dateToString($question->created_at)}}</strong></footer>
#if($question->status==1)
<span class="label label-success">Beantwoord</span>
#endif
</blockquote>
</div>
#endforeach
Showing all the questions. I want them to be displayed in nice rows of 3. However, some texts ($question->text) are longer than others, therefore they won't always perfectly start a new row, but append to the shortest previous grid, as you can see in the screenshot.
What I want would be more like a table, three columns, and then a new row on the same height with three new items.
So I'm looking for a way to
either return all the columns the same height
or automatically adding and closing a row div after each three columns.
What would be the best way to do this?

Answer 1

You may try something like this:
#foreach(array_chunk($questions->all(), 3) as $threeQuestions)
<div class="row">
#foreach($threeQuestions as $question)
// Do everything here
#if(isset($question->task))
<h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4>
#endif
// ...
#endforeach
</div>
#endforeach
Here, $threeQuestions contains three items per iteration, so .row will keep each three items within a div like this:
<div class='row'>
item-1
item-2
item-3
</div>
<div class='row'>
item-4
item-5
item-6
</div>