-1

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.rows going down

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...

Gallery with the class row out the loop

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

James Allan
  • 280
  • 5
  • 18
  • The thing is removing floats and change them with `display: inline-block` (so don't use old bootstrap floating grid). The other solution is to use the flexbox grid of bootstrap (beta version) or a good framework like Zurb Foundation (the best). Bootstrap is getting older and legacy. – Marcos Pérez Gude Aug 01 '16 at 12:38
  • the problem is if i change bootstrap version i will have to remake my whole site. – James Allan Aug 01 '16 at 12:47
  • Yeah, but make a simple grid like this takes less time than make it with bootstrap and then fix the problems. If you make in start a flexbox or inline-block grid you were not getting errors and your development is headache free. – Marcos Pérez Gude Aug 01 '16 at 12:51

2 Answers2

1

You need to add clearfix after each 4th col

<?php 
if ($i%4 == 0){ ?>
    <div class="clearfix"></div>
<?php } ?>

Full code:

<div class="container">
<?php
$sql = "SELECT * FROM gallery ORDER BY id DESC LIMIT $start_from, $per_page";
$run = mysqli_query($conn,$sql);
$i = 1;
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>';  
        if ($i%4 == 0){ ?>
            <div class="clearfix"></div>
        <?php }
        echo'
    </div>       
    ';
    $i++;
}?>
</div>
Michael Malov
  • 1,877
  • 1
  • 14
  • 20
  • I found a solution for my rows I found in this link http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns – James Allan Aug 01 '16 at 19:50
0

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;
 }
 }
James Allan
  • 280
  • 5
  • 18