Bootstrap columns in a php while loop - php

Question

I've read a ton of different ideas out there for this but can't seem to get any of them to work for my piece of code. Currently my products are displaying in a singular column but I'd like them to display in either a 3 or 4 column grid. Here's the code I have so far, hopefully someone can see where I'm going wrong.
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) { ?>
<div class="container">
<div class="col-sm-4">
<?php echo $row["ID"] . " - " . $row["item"] . "<br>";?>
<img src="img/<?php echo $row["image"] ?>" style="width:150px;height:150px;"><br>
<?php echo $row["description"] . " - $" . $row["price"]; ?>
<form method="post" action="viewcart.php">
<input type="hidden" name="item" value="<?php echo $row["item"]?>" />
<input type="hidden" name="price" value="<?php echo $row["price"]?>" />
<button type="submit">Add To Cart</button>
</form>
</div>
</div>

Answer 1

You have the .container being looped inside the while loop as well, which is the problem. The correct format is:
.container
.row
.col-XX-X
Put the container and the row outside and you are good to go.
<?php
if ($result->num_rows > 0) {
echo '<div class="container"><div class="row">'; // You left a row. Change here.
while($row = $result->fetch_assoc()) { ?>
<div class="col-sm-4">
<?php echo $row["ID"] . " - " . $row["item"] . "<br>";?>
<img src="img/<?php echo $row["image"] ?>" style="width:150px;height:150px;"><br>
<?php echo $row["description"] . " - $" . $row["price"]; ?>
<form method="post" action="viewcart.php">
<input type="hidden" name="item" value="<?php echo $row["item"]?>" />
<input type="hidden" name="price" value="<?php echo $row["price"]?>" />
<button type="submit">Add To Cart</button>
</form>
</div>
<?php } ?>
</div>
</div>

Answer 2

Put your container outside of while loop:
if ($result->num_rows > 0) {
echo '<div class="container">';
while($row = $result->fetch_assoc()) { ?>
<div class="col-sm-4">
<?php echo $row["ID"] . " - " . $row["item"] . "<br>";?>
<img src="img/<?php echo $row["image"] ?>" style="width:150px;height:150px;"><br>
<?php echo $row["description"] . " - $" . $row["price"]; ?>
<form method="post" action="viewcart.php">
<input type="hidden" name="item" value="<?php echo $row["item"]?>" />
<input type="hidden" name="price" value="<?php echo $row["price"]?>" />
<button type="submit">Add To Cart</button>
</form>
</div>
<?php } // end while loop
?>
</div>
<?php } //end if statement
?>

Answer 3

If you want more columns, make it like below:
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-2">
</div>
</div>
</div>
The total number of columns when you add up, must be 12