GrapeSoda3 GrapeSoda3 - 15 days ago 5
PHP Question

How to create new row with Bootstrap and PHP?

I have kind of a interesting problem. I am trying to create a grid style layout for a product webpage. I am using PHP and bootstrap to do this, but the issue I am having is everything stays on one row instead of creating a new row after 4 items are added to the grid. I have tried different looping styles with no luck, can anyone give any advice on this?

The grid should look like this

___ Item1 ___Item2 ___Item3 ___Item4____ <---- this is where a new row should start.

Here is my code:

/* SHOW ALL PRODUCTS ON HOMEPAGE */
{
while($temp = mysqli_fetch_assoc($result))
{
echo '<div class="row">';
echo '<div class="col-md-1"> </div>';
while($row = mysqli_fetch_assoc($result))
{
echo '<form action="#" method="POST">';
echo '<div class="col-md-2">';
echo '<div class="thumbnail">';
echo '<img src="', $row["pictureURL"], '">';
echo '<div class="caption">';
echo '<h4 class="pull-right">';
echo '</h4>';
echo '<h4><a href="productDetails.html">', $row[number], '</a></h4>';
echo '<p>', $row[description], '</p>';
echo '<p>Price: $', $row[price],'</p>';
echo '<p><input type="submit" name="add" value="Add To Cart"></p>';
echo '</div>';
echo '</div>';
echo '</div>';

echo '</form>';
}
echo '</div>';
}
}
?>

Answer

Use % (Modulus) operator in your while. For each 4 rows, it should enter the if condition:

$i = 0;
while($row = mysqli_fetch_assoc($result)) {
    if($i%4 == 0) {
        echo '<div class="col-md-1"> </div>';
    }
    echo '<form action="#" method="POST">';
    ....
    $i++;
}
Comments