Display row information from sql table using PHP and Bootsrap

Question

I'm trying to display product information (picture, description, price...) from sql table called products. I'm using Bootstrap and basically the HTML is something like:

<!-- ALL THE PRODUCTS-->
    <div class="row">   
                  <!-- ONE PRODUCT IN ONE COLUMN-->
                  <ul class="tutors_nav">
                    <li>
                      <div class="single_tutors col-lg-3 col-md-3 col-sm-3">
                        <!--  PRODUCT PICTURE-->
                        <div class="tutors_thumb">
                          <img src="img/gallery/prod1.jpg" />                      
                        </div>
                    <!--  PRODUCT INFORMATION-->
                        <div class="singTutors_content">
                          <h3 class="tutors_name">HUGO BOSS BOTTLED</h3>
                          <span>Homme</span>
                          <p>8700 DA</p>
                        </div>

                      </div>
                    </li>

                  </ul>


            </div>

I'm trying to get all the products from the sql table and then display every product (like in the previous html version) using PHP basically it will be 4 products in every row, this is my php code:

<?php   
$sql = "SELECT * FROM produits";
    if (!$result = $connection->query($sql)) {
        die ('There was an error running query[' . $connection->error . ']');
    }   


$rows = $result->num_rows;    // Find total rows returned by database
    if($rows > 0) {
        $cols = 4;    // Define number of columns
        $counter = 1;     // Counter used to identify if we need to start or end a row
        $nbsp = $cols - ($rows % $cols);    // Calculate the number of blank columns

        $container_class = 'row';  // Parent container class name
        $row_class = 'row';    // Row class name        
        $col_class = 'single_tutors col-lg-3 col-md-3 col-sm-3'; // Column class name
        $img_class='tutors_thumb';
        $desc_class='tutors_name';


        echo '<div class="'.$container_class.'">';    // Container open
        while ($item = $result->fetch_array()) {
            if(($counter % $cols) == 1) {    // Check if it's new row
                echo '<div class="'.$row_class.'">';    // Start a new row
            }           
                    //one product 
                    $img = $item['imgsrc'];
                    $des=$item['description'];
                    $prix=$item['prix'];
                    $type=$item['type'];

                    /*div class="tutors_thumb">
                      <img src="img/gallery/prod1.jpg" />                      
                    </div>
                    */

                    echo '<div class="'.$img_class.'"><img src='.$img.' alt="test"/></div>';

                    echo '<h3 class='.$desc_class.'>'.$des.'<p>'.$prix.'</p><span> '.$type.'</span></h3>  ';


            if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero
                echo '</div>';   //  Close the row
            }
            $counter++;    // Increase the counter
        }
        $result->free();
        if($nbsp > 0) { // Adjustment to add unused column in last row if they exist
            for ($i = 0; $i < $nbsp; $i++)  { 
                echo '<div class="'.$col_class.'">&nbsp;</div>';        
            }
            echo '</div>';  // Close the row
        }
        echo '</div>';  // Close the container
    }


?>

unfortunately it's displaying one product in every row, how to fix that please!

Answer 1

Few comments for your code:

• a container is a container, so use .container class (if you really need it), not .row
• every .row NEEDs a .col child (check how to nest columns), then you can append a .row to a .col, but the tree is like that

Check this code with commented corrections

<?php
    $sql = "SELECT * FROM produits";
    if (!$result = $connection->query($sql)) {
        die ('There was an error running query[' . $connection->error . ']');
    }

    $rows = $result->num_rows;    // Find total rows returned by database
    if($rows > 0) {
        $cols = 4;    // Define number of columns
        $counter = 1;     // Counter used to identify if we need to start or end a row
        $nbsp = $cols - ($rows % $cols);    // Calculate the number of blank columns

        $container_class = 'row';  // Parent container class name
        $row_class = 'row';    // Row class name
        $col_class = 'single_tutors col-lg-3 col-md-3 col-sm-3'; // Column class name
        $img_class='tutors_thumb';
        $desc_class='tutors_name';


        echo '<div class="row"><div class="col-sm-12 col-md-12 col-lg-12">';    // Container open
        while ($item = $result->fetch_array()) {
            if(($counter % $cols) == 1) {    // Check if it's new row
                echo '<div class="'.$row_class.'">';    // Start a new row
            }
            //one product
            $img = $item['imgsrc'];
            $des=$item['description'];
            $prix=$item['prix'];
            $type=$item['type'];

            /*div class="tutors_thumb">
              <img src="img/gallery/prod1.jpg" />
            </div>
            */
            echo '<div class="'.$col_class.'">'; //open column

            echo '<div class="'.$img_class.'"><img src='.$img.' alt="test"/></div>';

            echo '<h3 class='.$desc_class.'>'.$des.'<p>'.$prix.'</p><span> '.$type.'</span></h3>  ';

            echo '</div>'; //close column

            if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero
                echo '</div>';   //  Close the row
            }
            $counter++;    // Increase the counter
        }
        if(($counter % $cols) != 0) { // close .row if you actually have less than $cols columns printed
            echo '</div>';
        }
        /*
         * You don't need to fill missing columns, existing ones will be automatically pulled left
         * 
         * $result->free();
        if($nbsp > 0) { // Adjustment to add unused column in last row if they exist
            for ($i = 0; $i < $nbsp; $i++)  {
                echo '<div class="'.$col_class.'">&nbsp;</div>';
            }
            echo '</div>';  // Close the row
        }*/
        echo '</div></div>';  // Close the container
    }
?>