Loop row in bootstrap every 3 columns

You can use array_chunk(input array, size of each chunk) function to chunk your array into pieces.
php.net manual: array_chunk

Chunks an array into arrays with size elements. The last chunk may contain less than size elements.

Here is an example:

<?php $numberOfColumns = 3; $bootstrapColWidth = 12 / $numberOfColumns ; $arrayChunks = array_chunk($items, $numberOfColumns); foreach($arrayChunks as $items) { echo '<div class="row">'; foreach($items as $item) { echo '<div class="col-md-'.$bootstrapColWidth.'">'; // your item echo '</div>'; } echo '</div>'; } ?> 

No need for all this complexity. Bootstrap works within a 12 col grid system automatically. Just make sure you loop and make col size so that that evenly divides by 12 e.g. col-md-4.

This example will provide 3 per row automatically since 12 / 4 = 3.

<div class="row"> LOOPCODE { <div class="col-md-4"> DATA </div> } </div> 

First You should define a variable, then right before the loop ends increment it and echo the closing row tag and open another one depending on it.

Useful steps

• define $i = 0;
• inside the loop make your echos.
• right before the foreach ends increment the $i++ and make a condition : if $i % 3 == 0 then echo the closing tag of the row then generate a new row.

Code :

<div class='row'> <?php foreach($items as $item) { echo "<div class='col-lg-2'>"; echo "<div class='item'>"; echo 'Anythin'; echo '</div>'; echo '</div>'; $i++; if ($i % 3 == 0) {echo '</div><div class="row">';} } ?> </div>

Tip : You don't really want to foreach the row, its a bad idea, make one row and foreach the items.

This is a better way – to use chunk() function of Collections.

`@foreach($items->chunk(5) as $chunk) <ul> @foreach($chunk as $item) Item {{ $loop->iteration }} @endforeach </ul> @endforeach` 

dading84's answer works fine, but i have modified it for avoid adding a last empty row. The change was simply count the number of elements in the array, then check if the last element was reached, to prevent adding new div with class row.

Code edited:

<?php //Columns must be a factor of 12 (1,2,3,4,6,12) $numOfCols = 4; $rowCount = 0; $bootstrapColWidth = 12 / $numOfCols; $arrayCount = count($rows); ?> <div class="row"> <?php foreach ($rows as $row){ ?> <div class="col-md-<?php echo $bootstrapColWidth; ?>"> <div class="thumbnail"> <img src="user_file/<?php echo $row->foto; ?>"> </div> </div> <?php $rowCount++; if($rowCount % $numOfCols == 0 && $rowCount < $arrayCount) { echo '</div><div class="row">'; } } ?> </div> 

Resume:

• Added variable $arrayCount
• Add conditional inside the IF modulus to check if is the last row, so avoid adding new div.

Simple custom css solution... target rows in .listing wrapper with bottom-margin, last row has no margin-bottom.

HTML

<div class="listing"> <div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> </div> <div class="col-md-4"> </div> </div> <div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> </div> <div class="col-md-4"> </div> </div> </div> 

CSS

.listing .row { margin-bottom: 20px; } .listing .row:last-child { margin-bottom: 0; } 

 <div class="row"> <?php foreach ($rows as $row){ ?> <div class="col-lg-4 col-sm-4 col-6"> Your content </div> <?php } ?> </div> 

This will give three columns in each row.

Simple And Easy Solution

 $array = array('0' => 'ABC', '1' => 'DEF', '2' => 'GHI', '3' => 'JKL', '4' => 'MNO', '5' => 'PQR', '6' => 'STU', '7' => 'VWX', '8' => 'YZ' ); $index = 0; $n_array = array(); foreach ($array as $key => $value) { if ($key % 3 == 0) { $index++; } $n_array[$index][] = $value; } foreach ($n_array as $key => $values) { ?> <div class="row"> <?php foreach ($values as $value) { echo "<div class='col-md-4'>".$value."</div>"; } ?> </div> <?php } 

Doing it with bootstrap in a twig file:

<div class="row"> {% for item in items %} <div class="col-md-6 clearfix"></div> {% endfor %} </div> 

In bootstrap 5 no need to write an extra loop

<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-3 justify-content-center"> <?php $categories = $response['data']; foreach ($categories as $key => $category) { ?> <div class="col mb-5"> <div class="card h-100"> <p><?= $category['title'] ?></p> </div> </div> <?php } ?> </div> 

it will break columns 3 per row on medium screen read more here: https://getbootstrap.com/docs/5.0/layout/grid/