Bootstrap multiple rows based on mysql query count - php

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.