why Bootstrap grid positioning leaves empty columns?

Question

I am trying to create a Bootstrap positioning grid, generated by a PHP loop. The grid would contain 11 imgs, and the loop iterates 11 times. When the grid is created I don't understand why 2 columns always get skipped

this is the code I am using, I have uploaded a pictured of the resultenter image description here generated by my code

<style>

</style>
<?php 
$counter = 11;

echo '<div class="row " >';
for ($i = 1; $i < $counter; $i++) {

    echo "<div class=col-md-4 >  ciao <img src=pictures/venue$i.jpg alt=Flowers class=img-fluid>  </div>";

    if (($i+1) % 4 == 0)
        echo '</div><div class="row" id=my-row>';
}
echo '</div>';
?>

Answer 1

Change this line :

if (($i+1) % 4 == 0)

To this :

if (($i) % 3 == 0)

Because the former will split to three only on the first block, and the rest block are splitted to four.

Answer 2

<?php

$counter = 11;
echo '<div class="row">';
for ($i = 0; $i <= $counter; $i++) {
    $x = $i + 1; // for venue images starting at 1
    echo '<div class="col-md-4">  ciao <img src="pictures/venue' . $x . '.jpg" alt="Flowers" class="img-fluid"> </div>';
    if ( ( $x ) % 3 == 0 && $i != $counter) //added  $i != $counter to make sure on the last iteration an extra row isn't added and changed modulus to 3 not 4
        echo '</div><div class="row" id="my-row-' . $x . '">';
}
echo '</div>';

Bootstrap runs off 12 columns. You have a few problems with your code:

1. You are starting your counter at 1 causing the first block to display 3 but your next block to display 4 etc. col-md-4 takes 4 of the 12 columns so you can only fit 3 of these in a row.

2. You need to make sure you wrap your attributes in quotes, some browsers will still parse this and display as intended, others won't.

3. To display what you want properly (grid of 3 images along, 4 rows) you need 12 images or you will always be missing 1.

4. Each element that is provided an ID must be a unique ID you are repeating my-row