scaffolding for bootstrap columns in php while loops

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?

Antonis Grigoriadis · Accepted Answer · 2015-10-18 16:09:44Z

3

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.)

answered Oct 18, 2015 at 16:09

Antonis Grigoriadis

2,1002 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rhill45 Over a year ago

What do the variables equal: $entries (i assume is number of rows), $entries and $entry I'm confused

Antonis Grigoriadis Over a year ago

$entries are all the rows fetched from database (i.e. with ->fetchAll()). If you pass it as an argument to array_chunk(), with parameter 4, it will return new arrays of size 4. To loop them I named them $entriesRow (each Bootstrap row has 4 entries). Then we need one more foreach to loop each $entriesRow that contains 4 entries. It sounds complicated but is a simple idea. You can check the manual too: php.net/manual/en/function.array-chunk.php

Peter Kota · Accepted Answer · 2015-10-17 17:14:13Z

1

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>';

edited Oct 17, 2015 at 17:14

answered Oct 17, 2015 at 15:12

Peter Kota

8,3905 gold badges29 silver badges53 bronze badges

1 Comment

rhill45 Over a year ago

that would echo the first row as empty

Chris Go · Accepted Answer · 2018-03-08 16:17:08Z

0

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>

answered Mar 8, 2018 at 16:17

Chris Go

6458 silver badges15 bronze badges

Collectives™ on Stack Overflow

scaffolding for bootstrap columns in php while loops

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related