Where to use clear fix in html inside of a thumbnail dynamic gallery

Question

I have a dynamic gallery, where its looping. but my gallery thumbs are messed up. I used clearfix and it worked,but i press ctrl z and it didnt work ctrl y. So i lost where it was my mistake with clear fix. So now my row is not going by side i mean... my thumbs its not starting from the left to right. it starts in the left and its ending on the buttom of the page in a row down. here is a pic of it.

here is my code:

  <div class="container">
    <?php
    $sql = "SELECT * FROM gallery ORDER BY id DESC LIMIT $start_from, $per_page";
    $run = mysqli_query($conn,$sql);
    while ($rows = mysqli_fetch_assoc($run))
 {
    echo'
    <div class="row">

 <div class="col-md-3 col-sm-2  "> 
<div class="thumbnail  " id="real-estates-columns">
 <div class="text-center">'.($rows['image'] == '' ? 'No Image' : '<img src="../'.$rows['image'].'" width="100%" >').'</div>

<span class="label label-danger info pull-right">
<span data-toggle="tooltip" title="viewed"><b class="glyphicon glyphicon-filter"></b></span>
<span data-toggle="tooltip" title="category">'.ucfirst($rows['category']).' </span>
</span>

 <div class="title-realestates-columns caption">
<h3><a><strong>'.$rows['title'].'</strong></a></h3>
    <!--p>'.substr($rows['description'],0,30).'...</p--->

 <div class="row">

<button type="button"  class="btn btn-danger btn-block" data-toggle="modal" data-target="#info'.$rows['id'].'" ><span class="glyphicon glyphicon-info-sign"></span>  Info</button>
</div>

</div>
</div>
</br>
</div>  
</div>       
    ';
   }
  ?>
 </div>

If i take out my div class="row" out of my loop and the closing div of my class row too,the gallery works like this...

How can i fix this? the thing is clearfix but were.

Answer 1

I found a solution for my rows

I found in this link http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns

This is the css that fixed everything.

/*  Bootstrap Clearfix */

/*  Tablet  */
@media (min-width:767px){

/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: none;
}
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: left;
}
}


 /*  Medium Desktop  */
 @media (min-width:992px){

/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: none;
 }
 .col-md-1:nth-child(12n+1),
 .col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: left;
 }
 }


 /*  Large Desktop  */
 @media (min-width:1200px){

 /* Column clear fix */
 .col-md-1:nth-child(12n+1),
 .col-md-2:nth-child(6n+1),
 .col-md-3:nth-child(4n+1),
 .col-md-4:nth-child(3n+1),
 .col-md-6:nth-child(2n+1),
 .col-sm-1:nth-child(12n+1),
 .col-sm-2:nth-child(6n+1),
 .col-sm-3:nth-child(4n+1),
 .col-sm-4:nth-child(3n+1),
 .col-sm-6:nth-child(2n+1){
  clear: none;
  }
 .col-lg-1:nth-child(12n+1),
 .col-lg-2:nth-child(6n+1),
 .col-lg-3:nth-child(4n+1),
 .col-lg-4:nth-child(3n+1),
 .col-lg-6:nth-child(2n+1){
 clear: left;
 }
 }