1

I have kind of an interesting problem. I am trying to create a grid style layout for a product page. 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:

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>';
}
3
  • Are you trying to have something move to the next row after four <div class="col-md-2"> are written?
    – James
    Nov 18, 2016 at 19:20
  • Yes, so I have col-md-1 to pad the front, then after four col-md-2 (These are the items) I would like to start a new row.
    – GrapeSoda3
    Nov 18, 2016 at 19:22
  • 2
    Why not use col-md-3 for your items instead?
    – James
    Nov 18, 2016 at 19:31

1 Answer 1

4

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++;
}
5
  • This code worked for the formatting so thanks you! I am having an issue now where the columns look like they are expanding while you go down the page. Is there any way to fix this?
    – GrapeSoda3
    Nov 18, 2016 at 19:43
  • What do you mean by expanding? Nov 18, 2016 at 19:44
  • So I have roughly 150 entries that I am displaying on one page, and as you scroll down, the rows are getting wider and wider. It's almost like they are somehow breaking out of the container or the container is getting wider itself. I am using col-md-3 now for the spacing because it's simpler.
    – GrapeSoda3
    Nov 18, 2016 at 19:47
  • 1
    Bootstrap rows have a size of 12 in grid system. So, all you need to do is to sum all col-md-X to 12, for each row. If you have 4 items, just use col-md-3 in each one. If you have 5, you can use 3 with col-md-3, one with col-md-2 and one with col-md-1. Nov 18, 2016 at 19:49
  • Yea, I understand the grid system, but I have never seen bootstrap do this before. When I go to inspect the elements, they still show up as col-md-3, but they are way too wide to be that.
    – GrapeSoda3
    Nov 18, 2016 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.