Group of bootstrap Gird images staying out of loop

Question

I have a list of images where I am using in grid to organize them getting the exact amount I need by lines. With this I made a loop to control the grids and I also have the loop of the images.

Doubt: What could you be doing to correct why grids and images are getting separate, as you can see in: view-source google chrome

In case you want to see more about the grid, I got this post: Grid bootstrap getting misaligned in panel with results brought from database

And as you can see also in the image below, this error makes my images stay under each other.

php:

<div class="container">   
    <div class="row">
      <?php 
      $i = 0;
      $row = 0; 
      while($i < $count) : 
        if($row == 6){ 
         echo '</div><div class="row"> ';
         $row = 0;
       } 
       ?>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
          <?php
          $nofoto = '../../images/nofoto.jpg';
          while($rowDadosFoto = $queryDadosFoto->fetch()) {
            $foto = $rowDadosFoto['FOTO'];
            if($foto >= 1){
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/".$rowDadosFoto['FOTO']."' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }else{
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='$nofoto' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }
          }
          ?>
        </ul>
        <?php
        $row++; 
        $i++;
      endwhile; 
      ?>
    </div>     
  </div>

view-source google Chrome

<div class="container">   
    <div class="row">

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
          <li id='image_li_4444' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/4444.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_22233' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/nofoto.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_3333' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/3333.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_5555' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/5555.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_123456' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/123456.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_1111' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/1111.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_364526' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/364526.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_7777' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/7777.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_2222' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/2222.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>        </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
        </div><div class="row">        
       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
            </div>     
  </div>

Answer 1

We’re missing a div closure below the </ul>

<div class="container">   
    <div class="row">
      <?php 
      $i = 0;
      $row = 0; 
      while($i < $count) : 
        if($row == 6){ 
         echo '</div><div class="row"> ';
         $row = 0;
       } 
       ?>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
          <?php
          $nofoto = '../../images/nofoto.jpg';
          while($rowDadosFoto = $queryDadosFoto->fetch()) {
            $foto = $rowDadosFoto['FOTO'];
            if($foto >= 1){
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/".$rowDadosFoto['FOTO']."' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }else{
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='$nofoto' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }
          }
          ?>
        </ul>
        </div>
        <?php
        $row++; 
        $i++;
      endwhile; 
      ?>
    </div>     
  </div>

Answer 2

You’re doing all the iteration inside a col-Md-2, so the images are all in one column and there’s a lot of column left over as you see at the end:

<div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
        </div><div class="row">        
       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
            </div>     

If it’s an image per column, you don’t need a ul. I didn’t understand how your design would look but I tried to do something similar.

<div class="container">   
    <div class="row">
        <?php while($rowDadosFoto = $queryDadosFoto->fetch()) : ?>
            <div class="col-md-2">
                <a href='javascript:void(0);' style='float:none;' class='image_link'>
                    <img src='../../images/<?= $rowDadosFoto['FOTO'] >= 1 ? 'produtos/'.$rowDadosFoto['FOTO'] : 'nofoto.jpg' ; ?>' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
                </a>
            </div>
        <?php endforeach; ?>

    </div>     
</div>