vrijdrogenaam vrijdrogenaam - 5 months ago 20
CSS Question

Blade bootstrap foreach get nice-looking grid-system

I'm having this piece of code in my Laraval'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))
<a href="{{URL::action('showTask', $question->task_id)}}"><h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4></a>
@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.

enter image description here

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

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))
                <a href="{{URL::action('showTask', $question->task_id)}}"><h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4></a>
            @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>