Showing 4 items at each row from MySQL table data inside HTML

I am working on a web-app that should show items from a MySQL database.

This is my current code:

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    die ('Failed to connect to MySQL: ' . mysqli_connect_error());  
}

mysqli_set_charset($conn, "utf8");
$sql = 'SELECT * FROM tb_tiendas';

$query = mysqli_query($conn, $sql);

?>


            <!-- Content
                ============================================= -->
                <section id="content">

                    <div class="content-wrap">


                        <div class="container clearfix">



                            <div class="col-xl-10" style="display: flex; justify-content: center;">

                                <?php


                                $i = 0;
                                $num_tiendas = mysqli_num_rows($query);
                                $path = "/administrar/application/admin/tiendas/";

                                while ($row = mysqli_fetch_array($query))
                                {

                                    $foto = $row['imagen'];
                                    $nombre = $row['nombre'];
                                    $direccion = $row['direccion'];
                                    $horario = $row['horario'];


                                    ?>
                                    <div class="col-md-4"> 


                                        <td><img width="280" height="200" src="<?php echo $path.$foto ?>"/></td>
                                        <h4><?php echo $nombre ?></h4>
                                        <h5><?php echo $direccion ?></h5>
                                        <h6><?php echo $horario ?></h6>

                                    </div>


                                    <?php
                                    $i++;



                                }
                                ?>

                            </div>
                        </div>
                    </div>
                </section>

What I need is to show 4 items on each row.

How can I insert a new row of items every 4 items?

Answer

if you are using Bootstrap 4, there is a class named .row and inside it, you put your items in a div with .col class name, see:

....
<div class="row">
   <div class="col"><?= $nombre ?></div>
   <div class="col"><?= $direccion ?></div>
   <div class="col"><?= $horario ?></div>
</div>
....

learn more about bootstrap 4 grid system here

Advertisement

Answer