Insert items from MySql through PHP to HTML Bootstrap page - php

Question

I'm trying to match results from this PHP code into this Bootstrap HTML structure.
What I'm able to achieve so far is printing items from database in 3-column layout, but I don't known how to combine this results with/ info my bootstrap html "structure/ table". I think I need to work with "id" and increment it after every "echo" (h4)? But I'm very new to PHP. Thank you for any practical advices.
PHP CODE:
// Run query on connection
$query = "SELECT
product.id,
product.name as product_name,
product.price,
product.type
FROM pizza_project.product
INNER JOIN pizza_project.product_type on product.type = product_type.id
where product.type in (1,2)
order by product.type ASC, product.price ASC";
$result = $con->query($query);
?>
<table>
<tr>
<?php
$split = 0;
$id = $row['id']; // just an idea I think I need to start with
if (mysqli_num_rows($result) > 0) {
foreach ($result as $row) {
echo '<td>' . $row['product_name'] . ' ' . $row['id'] . '</td>';
$split++;
if ($split%3 == 0) {
echo '</tr> </tr>';
}
}
}
?>
</tr>
</table>

Answer 1

<?php
$itemsInRow = 0;
foreach ($result as $row) {
if ($itemsInRow === 0)
echo "<div class=\"row text-center\">";
echo "<div class=\"col-md-4\">";
echo "<span class=\"fa-stack fa-4x\">";
echo "<img class=\"product-image\" src=\"" . $row['img'] . "\">";
echo "</span>";
echo "<h4 class=\"service-heading\">" . $row['headline'] . "</h4>";
echo "<p class=\"text-muted\">" . $row['text'] . "</p>";
echo "</div>";
if ($itemsInRow === 0)
echo "</div>";
if ($itemsInRow % 3 === 0) {
$itemsInRow = 0;
continue;
}
$itemsInRow++;
}
Is this what you are trying to achieve? I will improve my answers if its the right way. This is not tested.