Bootstrap multiple rows based on mysql query count

Question

I am using Bootstrap to create a row of 6 colunm images.

<div class="row">
    <?php
    $sql = //my query
    while($row = mysqli_fetch_array($sql)){
    ?>
    <div class="col-xs-6 col-md-2">
       <img id="img" class="img-responsive" src="img/<?php echo $row['image']; ?>" />
    </div>
    <?php
    }
    ?>
</div>

Which works fine when there is only 6 rows from the database, however when there is 7 the extra one gets bumped to the far right rather than the far left on the next row, see example below.

| img | img | img | img | img | img
                              | img

Normal result i am looking for would be

| img | img | img | img | img | img
| img

I want to create a new bootstrap row after every 6 results, any help would be appriciated

Answer 1

You could fetch all the values into an array first, count how many elements are in the array and then dynamically control what span classes you use.

<div class="row">
<?php
$sql = //my query
$images = array();
while($row = mysqli_fetch_assoc($sql)){
    $images[] = $row['image'];
}
$column_class = count($images) > 6 ?  "col-xs-3 col-md-1" : "col-xs-6 col-md-2";

foreach ($images as $image) {
?>
<div class="<?= $column_class ?>">
   <img id="img" class="img-responsive" src="img/<?= $image ?>" />
</div>
<?php
}
?>

Answer 2

i have seen this before when the heights of the images are not identical. the float left only floats to the point where the bottom line is uneven. try adding a style height with a reasonable fixed height.

<div class="row">
    <?php
    $sql = //my query
    while($row = mysqli_fetch_array($sql)){
    ?>
    <div class="col-xs-6 col-md-2">
       <img id="img" class="img-responsive" style="height:100px" src="img/<?php echo $row['image']; ?>" />
    </div>
    <?php
    }
    ?>
</div>

Answer 3

I ran into this problem in a recent project and was able to solve it with this code. I only have two views so I only need the two lines but you could have more if you wanted. You can see this in action on this page

<div class="visible-md-block visible-lg-block clearfix">

<div class="visible-sm-block visible-xs-block clearfix">

Here is the full php code for the gallery page

<?php
    $c = 1;
    foreach($images as $image) {?>
     <div class="col-xs-4 col-md-3">
       <a class="thumbnail" href="path to full size image" data-toggle="lightbox" data-footer="<?php echo $image['caption']; ?>">
        <img class="img-responsive" src="path to thumbnail" alt="...">
      </a>
     </div>
<?php
        if(($c % 4) == 0) {
            echo '<div class="visible-md-block visible-lg-block clearfix"></div>';
        }

        if(($c % 3) == 0) {
            echo '<div class="visible-sm-block visible-xs-block clearfix"></div>';
        }

        $c++;
    }
?>

Sorry while this code works for when you want the number of images in a row to change at different screen sizes I just re read your question and you say you just want 6 across all the time so you could just use one line

if(($c % 6) == 0) {
            echo '<div class="clearfix"></div>';
        }

The $c variable is just a counter and the code $c % 6 == 0 will put the clearfix div every time $c is divisible by 6.