1

Mi problema es que tengo un sistema en php que lo que hace es buscar en una base de datos columnas, a tantas columnas crea tantos elementos.

<div class="card-deck">
<?php
  $generatorquery = "SELECT * FROM `testeo`";
  $result = mysqli_query($con, $generatorquery) or die(mysqli_error($con));
  while ($row = mysqli_fetch_array($result)) {
    echo '
     <div class="card">
      <img class="card-img-top" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">test3 <small style="padding-left:auto;" class="text-muted">0 en stock</small></h5>
        <h2 class="card-text">5$</h2>
        <button type="button" class="btn btn-primary btn-lg btn-block">Comprar</button>
      </div>
     </div>';
  }
?>
</div>

El problema viene cuando al pasar de tres cards se empiezan a agrupar sin fin introducir la descripción de la imagen aquí

Lo que quiero es que se agrupen de esta forma :

introducir la descripción de la imagen aquí

¿Alguién tiene idea? Un saludo

2 respuestas 2

0

Saludos para ello te sugiero agregar el tamaño de cada columna con:

col-md-4

tu código puede ser algo así:

echo '<div class="card-deck">
<div class="col-md-4">
  <div class="card">
    <img class="card-img-top" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">test <small style="padding-left:auto;" class="text-muted">0 en stock</small></h5>
      <h2 class="card-text">5$</h2>
      <button type="button" class="btn btn-primary btn-lg btn-block">Comprar</button>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card">
    <img class="card-img-top" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">test2<small style="padding-left:auto;" class="text-muted">0 en stock</small></h5>
      <h2 class="card-text">5$</h2>
      <button type="button" class="btn btn-primary btn-lg btn-block">Comprar</button>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card">
    <img class="card-img-top" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">test3 <small style="padding-left:auto;" class="text-muted">0 en stock</small></h5>
      <h2 class="card-text">5$</h2>
      <button type="button" class="btn btn-primary btn-lg btn-block">Comprar</button>
    </div>
  </div>
</div>
</div>';

si te fijas cada div class="card" esta dentro de un div con la clase col-md-4 pruebalo y me comentas suerte, para mas detalle te sugiero revisar el sistema de grilla de Bootstrap Grid Bootstrap

1
  • Gracias, funciona :).
    – user109229
    Commented el 1 abr. 2019 a las 18:00
0

Acá te dejo otro ejemplo por si te sirve:

El container lo dejé fluido y con flex le dije que me deje al centro todo el contenido. Después al siguiente div row le dije que su tamaño sea de 6 y que incluso este contenido con flex lo centre.

Lo que son las .card, tomé de ejemplo la que tienen en la página de bootstrap que vienen con un with ya definido. Creo que con este código, si mantienes el witdh que tienen las tarjetas te van a quedar siempre centradas y si por ejemplo quieres que entren más tarjetas por fila modificas el col-lg-6 del div que tiene la clase row

.card{
  margin: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container-fluid d-flex justify-content-center">

    <div class="row col-lg-6 d-flex justify-content-center">

      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

      
    </div>
  </div>
		

</body>
</html>

Saludos

Tu Respuesta

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