php while loop not printing contents of an array horizontally in bootstrap

one text

Solution:

To allow for the products to be shown in 'rows' (horizontally), you need to add a <div class="row"> to your HTML code. I've banged together a small demo, that shows the basic idea (and the use of HEREDOC which allows for (IMHO) cleaner separation of HTML and PHP code).

Function renderProduct() is invoked through a foreach() loop on a dummy product range stored in array $products to imitate your database while loop.

The gist:

<?php

function renderProduct($product = 'n/a') {
    $htmlProduct = <<<HEREDOC
    <div class="col-sm-4 col-md-3">
                   <form method="post" class="" action="index.html">
                     <div class="products ">
                         <img src="$product" class="img-fluid" />
                         <h4 class="text-info">$product</h4>
                         <h4>INR $product</h4>
                         <input type="text" name="quantity" class="form-control" value="1" />
                         <input type="submit" name="add_to_cart" class="btn btn-info" value="Add" />
                     </div>
                   </form>
                   </div>
    HEREDOC;

    return $htmlProduct;
}

$htmlStart = <<<HEREDOC
<!DOCTYPE html> <html lang="en" dir="ltr">   
<head>
    <meta charset="utf-8">
    <title>Shopping Cart</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="cart.css">
    </head>
<body>
<div class="container">
<div class="row">           <!-- ADDED -->
HEREDOC;

$htmlEnd = <<<HEREDOC
</div> <!-- close row -->
</div> <!-- close container -->
</body>
</html>
HEREDOC;


// render page
echo $htmlStart;

$products = ['product1', 'product2', 'product3', 'product4', 'product5', 'product6', 'product7'];
foreach($products as $prod) {
    echo renderProduct($prod);
}

echo $htmlEnd;

Source