scaffolding for bootstrap columns in php while loops - php

Question

I'm trying to present my sql rows in bootstrap grid dynamically
<div class="row>
<div class="col-md-3">sql row 1</div>
<div class="col-md-3">sql row 2</div>
<div class="col-md-3">sql row 3</div>
<div class="col-md-3">sql row 4</div>
</div>
<div class="row>
<div class="col-md-3">sql row 5</div>
<div class="col-md-3">sql row 6</div>
<div class="col-md-3">sql row 7</div>
<div class="col-md-3">sql row 8</div>
</div>
and I'm having trouble how to set up the while loop. what I have now just does
<div class="row>
<div class="col-md-3">sql row 1</div>
<div class="col-md-3">sql row 2</div>
<div class="col-md-3">sql row 3</div>
<div class="col-md-3">sql row 4</div>
<div class="col-md-3">sql row 5</div>
<div class="col-md-3">sql row 6</div>
<div class="col-md-3">sql row 7</div>
<div class="col-md-3">sql row 8</div>
</div>
how can I set up loop to assign four col-md-3 classes to each row automatically and then continue. Current code:
<div class="row">
while($row = $result->fetch_assoc())
{
$spons_amt = round($row["spons_amt"] + 500, 2);
echo '<div class="col-md-3">' . $spons_amt . '</div>'
}
mysqli_close($conn);
</div>
I'm guessing what I need to do is
<div class="row">
while($row = $result->fetch_assoc())
// count number of rows
{
//list 4 of these (to make a row)
$spons_amt = round($row["spons_amt"] + 500, 2);
echo '<div class="col-md-3">' . $spons_amt . '</div>'
}
// echo </div><div class="row"> between every set of 4
mysqli_close($conn);
</div>
Am I going about this the right way? How could I complete the code?

Answer 1

The most elegant solution is to use PHP's array_chunk function:
foreach(array_chunk($entries, 4) as $entriesRow) {
echo '<div class="row">';
foreach ($entriesRow as $entry) {
echo "<div class='col-md-3'>$entry</div>";
}
echo '</div>';
}
(Assuming that you have fetched all DB rows in $entries array.)

Answer 2

Try something like this:
$n = 0;
echo '<div class="row">';
while($row = $result->fetch_assoc())
{
$spons_amt = round($row["spons_amt"] + 500, 2);
if($n%4 == && $n =! 0) {
echo '</div>';
echo '<div class="row">';
echo '<div class="col-md-3">' . $spons_amt . '</div>';
$n = 1;
} else {
echo '<div class="col-md-3">' . $spons_amt . '</div>';
$n++;
}
}
echo '</div>';

Answer 3

No need for all this complexity. Bootstrap works within a 12 col grid system automatically. Just make sure you loop and make col size so that that evenly divides by 12 e.g. col-md-4.
This example will provide 3 per row automatically since 12 / 4 = 3. Just update to use ECHO or whatever you need this is just a basic concept example.
<div class="row">
LOOPCODE
{
<div class="col-md-4">
DATA
</div>
}
</div>