Отображение 4 элементов в каждой строке из MySQL данных таблицы внутри HTML

Question

Я работаю над веб-приложением, которое должно отображать элементы из базы данных MySQL.

Это мой текущий код:

$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>

Мне нужно показать 4 элементы в каждой строке.

Как я могу вставлять новую строку элементов каждые 4 элемента?

Answer 1

, если вы используете Bootstrap 4, есть класс с именем .row и внутри него вы помещаете свои элементы в div с .col именем класса, см.:

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

подробнее о системе bootstrap 4 здесь