How to show MySQL query results using PHP in box-style? - php

Question

I'm setting up a new Website and i want to show the results of a searching MySQLi query in boxes.
My php code....
$query = mysqli_query($con,"SELECT * FROM `products`");
while($row = mysqli_fetch_array($query)) {
echo "<img src='/Images/".$row['product_image']."' height='200' width='200'>"
echo '<h6> Id:'.$row['product_id'].'</h6>';
echo '<h6> Name:'.$row['product_name'].'</h6>';
echo '<h6> Proce:'.$row['product_price'].'</h6>';
}
With that code the results of a searching query are presented like this
I'm trying using with many ways to achieve a presentation of the results like this way:
Any idea or advice? Thank you

Answer 1

Use css "float: left"
$query = mysqli_query($con,"SELECT * FROM `products`");
while($row = mysqli_fetch_array($query)) {
echo '<div style="float:left">';
echo "<img src='/Images/".$row['product_image']."' height='200' width='200'>";
echo '<h6> Id:'.$row['product_id'].'</h6>';
echo '<h6> Name:'.$row['product_name'].'</h6>';
echo '<h6> Proce:'.$row['product_price'].'</h6>';
echo '</div>';
}

Answer 2

you can use bootstrap to achieve this. For example, just add class="col lg-4" inside the div tag, and you will have 3 columns for each row.
Sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section class="content">
<div class="container">
<div class="row">
<?php
$get = mysqli_query($con, "SELECT * FROM `products` ORDER BY `product_name`");
while ($products = mysqli_fetch_assoc($get)) { ?>
<div class="col-lg-4">
<div class="thumbnail" align="center">
<img src="admin/images/products/<?php echo $products['photo']; ?>" style="width: 220px; height: 150px">
<div class="caption">
<h4>
<?php echo $products['product_name']; ?>
</h4>
<span>$<?php echo number_format($products['price']); ?></span>
<br />
<br />
Detail
<input type="button" name="wishlist" id="add_wishlist" value="+ " onclick="addWishlist('<?php echo $products[id]; ?>', '<?php echo $id_user; ?>')" class="btn btn-info">
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>