I have a div card for product image, i need to make them split to have rows each. Each row must have 4 images and second row 4 images. Does anyone can assist me to this?
//div card as row list from here.
// 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 with a column class
echo "<div class='col-md-3'>
<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>
</div>
</div>
</div>";
To do this properly within Bootstrap, you need to enclose every set of four items within a row. That is, four sets of columns equals one row.
Essentially, what you’re trying to do is this (this is pseudocode):
start row
col-md-3
col-md-3
col-md-3
col-md-3
end row
start row
col-md-3
col-md-3
col-md-3
col-md-3
end row
To do this, you need to have a counter that keeps track of the number of iterations and does something whenever the number of iterations divided by 4 is an integer with no remainder.
E.g. it should do something at index 0 (0/4 = 0), index 4 (4/4 = 1), and index 8 (8/4 = 2), but not 5 (5/4 = 1.25).
So you want something like this:
<?php
// This would actually be the data returned from your database connection
$test_array = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'];
// I like to have the tab and new line characters saved in variables for easy reference
$t = "\t";
$n = "\n";
?>
<head>
<link rel='stylesheet' id='bootstrap_css-css' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css?ver=6.2.2' type='text/css' media='all' />
</head>
<body>
<div class="container">
<?php
// This makes sure there's actually data before running the rest of the routine
if ( count($test_array) > 0 ) {
// Set up the counter to track where you are in the loop
$i = 0;
foreach ( $test_array as $item ) {
// Rows start or end when the item number is evenly divisible by 4
// e.g. at index 0 (which is 'Item 1') and index 4 (which is 'Item 5')
if ( $i % 4 === 0 ) {
// Close the previous row if you aren't at the beginning of the loop
if ($i > 0) {
echo str_repeat($t, 2) . '</div>' . $n;
}
// Open a new row
echo str_repeat($t, 2) . '<div class="row">' . $n;
}
// This is where the card data actually goes
echo str_repeat($t, 3) . '<div class="col-md-3">' . $item . '</div>' . $n;
// Increment the counter
$i++;
}
// This ends your last row (which can also be your first row if you just had one row of data)
echo str_repeat($t, 2) . '</div>' . $n;
}
?>
</div>
</body>
Paul’s right that col-md-3 will give you four columns. Bootstrap is base 12 meaning it breaks up the page into 12 columns, so md-3 will give you four columns (12/3 = 4). All you should need is a minor tweak to your code.
// Display the products
$stmt = $pdo->query("SELECT * FROM products");
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
$count = 0;
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
if ($count % 4 == 0) {
echo "<div class='col-md-3'>"
}
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>
</div>
</div>"
$count++;
// close the last element of each 4
if ($count % 4 == 3) {
echo "</div>"
}
}
// ensure your col-md-3 content is closed. if statement is to ensure an extra closing tag isn't used, which could mess up your page.
if ($count % 4 != 3) {
echo "</div>"
}