0

Buenos dias una consulta estoy intentando realizar que un card se coloque uno al lado del otro pero todos se van hacia abajo, espero me puedan ayudar. Esta es la forma como sale: introducir la descripción de la imagen aquí Y necesito se visualice de esta forma: introducir la descripción de la imagen aquí

$query = mysqli_query($conexion, "SELECT * FROM cliente");
                        $result = mysqli_num_rows($query);
                        if ($result > 0) {
                            while ($data = mysqli_fetch_assoc($query)) { ?>
                            <!-- Content Row -->
                            <div class="row">
                                <div class=" col-sm-2 col-4">
                                    <div class="card card-stats">
                                        <div class="card-header card-header-primary card-header-icon">
                                            <div class="card-icon">
                                                <i class="fas fa-user fa-2x"></i>
                                            </div>
                                            <a class="card-category text-warning font-weight-bold"> Consultorio <?php  echo $data['telefono']; ?>                 
                                            </a>
                                            <h3 class="card-title"><?php  echo $data['nombre']; ?></h3>
                                            <a class="card-category text-primary font-weight-bold">  <?php  echo $data['direccion']; ?>                          
                                            </a>
                                            <a class="text-dark font-weight-bold">  <?php  echo $data['horario']; ?>                 
                                            </a>
                                        </div>
                                        <div class="card-footer bg-primary text-white">
                                        </div>
                                    </div>
                                </div>                                     
                            </div> 

1 respuesta 1

0

Por supuesto que cada tarjeta va a aparecer debajo de la anterior porque que por cada ciclo del while se está imprimiendo un <div class="row">.

Como no sabes cuántas tarjetas imprimirás, por ende no se sabe cuándo debes cerrar cada columna, bootstrap, al menos la versión 5, tiene una forma fácil de manejarlo, usando row-cols:

En este código la cantidad de tarjetas por fila serán: extra-pequeñas: 1, pequeñas: 2, medianas: 3, grandes (o superior): 4.

<div class="container text-center">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
    <?php
    while ($data = mysqli_fetch_assoc($query)) {
        ?>
        <div class="col">
            <!-- *** IMPRIMIR AQUI LA TARJETA -->
        </div>
        <?php
    }
    ?>
    </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.