Laravel: blade foreach looping bootstraps

I have a foreach loop and inside that contains html with bootstrap columns.

@foreach($address as $add) <div class="col-md-6"> Some data </div> @endforeach 

However, bootstrap requires that a div line be created before creating the columns, and this direct relation to the foreach loop would create a line div for each col-md-6. I want to know how I can throw a div in a line, skip the next loop, casting only the closing div tag. Then repeat this process.

Sample output where loops 4 times:

 <div class="row"> <div class="col-md-6"> Some data </div> <div class="col-md-6"> Some data </div> </div> <div class="row"> <div class="col-md-6"> Some data </div> <div class="col-md-6"> Some data </div> </div> 
+8
loops php foreach laravel
source share
3 answers

As an alternative to Alexei Mezenin's answer, you can use array_chunk instead. http://php.net/manual/en/function.array-chunk.php

 @foreach(array_chunk($address, 2) as $chunk) <div class="row"> @foreach($chunk as $add) <div class="col-md-6"> Some data </div> @endforeach </div> @endforeach 

I personally find the above a little more readable.

Alternatively, if $address is a collection, you can use $address->chunk(2) instead of array_chunk($address, 2) .

If you want to change the number of columns you have, you just need to change the number 2 to as many columns as you want.

Hope this helps!

+26
source share

Use the $loop variable :

 <div class="row"> @foreach($address as $add) <div class="col-md-6"> Some data </div> @if ($loop->iteration % 2 == 0) </div> <div class="row"> @endif @endforeach </div> 
+5
source share

You can use the Laravel snippet in the blade template.

 @foreach($products->chunk(3) as $items) <div class="row"> @foreach($items as $item) <div class="col-md-4 portfolio-item"> <a href="#"> <img class="img-responsive" src="{{ 'uploads/'.$item->product_image_url }}" alt=""> </a> <h3> <a href="/view-product-details/{{ $item->id }}">{{ $item->product_name }}</a> </h3> <p>{{ str_limit($item->product_description, 121) }}</p> </div> @endforeach </div> @endforeach 

Copied from blogpost .

+3
source share

All Articles