Reducing the size of div card from your shopping cart

Question

Hi Team

I want to reduce div card size, so that each div card will have its own div card as in a row 4. Then another row have div card with details 4. Currently their images and div card are fillng up the whole page as list.

// php code

// Display the products
$stmt = $pdo->query("SELECT * FROM products");
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($products as $product) {
    $productID = $product['id'];
    $productName = $product['product_name'];
    $productPrice = $product['product_price'];
    $productImage = $product['product_image'];

    // Start a Bootstrap card i neeed to reduce them here on div card.
    echo "<div class='card product-card' >
            <img src='$productImage' class='card-img-top' alt='$productName'>
            <div class='card-body'>
                <h5 class='card-title'>$productName</h5>
                <p class='card-text'>Price: $productPrice</p>";

Mohamed Azarudeen Z · Answer

Try this // php code // Display the products $stmt = $pdo->query("SELECT * FROM products"); $products = $stmt->fetchAll(PDO::FETCH_ASSOC); // Start the row container echo " "; // Iterate over the products foreach ($products as $product) { $productID = $product['id']; $productName = $product['product_name']; $productPrice = $product['product_price']; $productImage = $product['product_image']; // Start a Bootstrap card with a column class echo " $productName Price: $productPrice "; } // Close the row container echo " ";

Reducing the size of div card from your shopping cart

Answers (1)