How do I create a line break in php while loop after 3 cards are shown?

Question

New to coding and was wondering how I would break to a new line after 3 cards are shown. Tried flex and grid but nothing. Currently all my cards just push off the screen. Tried bootstrap classes and my own css and nothing. Thanks

 include 'db_conn.php';
 $pic = mysqli_query($conn, "SELECT * FROM `users`");
 while($row = mysqli_fetch_array($pic)){
   echo "
   <div class='container'>
   <div class='row'>
     <div class='col'>
       <div class='card' style='width: 18rem;'>
         <img src='$row[image]' class='card-img-top' alt='Employee'>
         <div class='card-body'>
           <p class='card-text'>$row[first] $row[last]</p>
           <p class='card-text'>$row[position]</p>
           <p class='card-text'>$row[city]</p>
           <p class='card-text'>$row[state]</p>
           <button type='button' class='btn btn-primary'>Edit</button>
           <button type='button' class='btn btn-danger'>Delete</button>
         </div>
     </div>
     </div>
   ";
 }
 ?>

There are two ways of doing it: 1. you can count number of iterations inside for loop and add a new "row" after the third one. (https://stackoverflow.com/questions/38620745/count-iterations-in-while-loop) 2. set number of cards per row (depending on screen size) using "col" classes, in your case you can use "col-md-4" which means for medium sized screen it render card with 4 column width (total number of columns in one row=12), hence 3 cards per row. Thanks. — Muhammad Abdullah Ali, Jul 15 '21 at 01:03

score 0 · Answer 1 · answered Jul 15 '21 at 01:12

you can use bootstrap row columns to do this.
only loop columns,not loop the whole container.
here is bootstrap document https://getbootstrap.com/docs/5.0/layout/grid/#row-columns

<?php
 include 'db_conn.php';
 $pic = mysqli_query($conn, "SELECT * FROM `users`");
 echo "<div class='container'>
 <div class='row row-cols-3'>";
 while($row = mysqli_fetch_array($pic)){
   echo "
     <div class='col'>
       <div class='card' style='width: 18rem;'>
         <img src='$row[image]' class='card-img-top' alt='Employee'>
         <div class='card-body'>
           <p class='card-text'>$row[first] $row[last]</p>
           <p class='card-text'>$row[position]</p>
           <p class='card-text'>$row[city]</p>
           <p class='card-text'>$row[state]</p>
           <button type='button' class='btn btn-primary'>Edit</button>
           <button type='button' class='btn btn-danger'>Delete</button>
         </div>
   ";
 }
 echo "</div>
 </div>";
 ?>

How do I create a line break in php while loop after 3 cards are shown?

1 Answers1