Loop with columns and Rows

Question

I’ve been trying to do it like this:

<?php foreach ($unfollow as $row): ?>
  <div class="row">
    <div class="col-md-4">
      <?php var_dump($row)?>
    </div>
  </div>
<?php endforeach ?>

Only it brings me one row and a column of 4.

The correct would be 1 Row 3 columns of col-md-4.

How to correct?

Answer 1

You can try this way, creating a new .row each time a counter reaches a multiple of 3 (see explanatory comments in the code):

<?php
$col = 1; // contador do laço
$divrow = "<div class='row'>"; // HTML da .row
$ufsize = sizeof($unfollow); // tamanho da array
echo $divrow; // imprime a abertura da .row
foreach ($unfollow as $row):
?>
   <div class="col-md-4">
      <?php var_dump($row)?>
   </div>
<?php
   // se chegar na coluna 3, ou o valor do contador for igual ao tamanho da array,
   // fecha a div
   if($col%3 == 0 || $col == $ufsize){
      echo "</div>"; // imprime o fechamento da div da .row
      // se o valor do contador for menor que o tamanho da array,
      // imprime a abertura do .row
      if($col < $ufsize) echo $divrow;
   }
   $col++; // incrementa o contador
?>
<?php endforeach ?>

Answer 2

You can change the loop to the columns:

<div class="row">
  <?php foreach ($unfollow as $row): ?>
    <div class="col-md-4">
      <?php var_dump($row)?>
    </div>
  <?php endforeach ?>
</div>

This way it will produce:

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

As Bootstrap is responsive, it will align the "col-Md-4" columns with this spacing and will automatically arrange the excess columns in new row.

I hope I’ve helped.