Card-columns Bootstrap

Question

So the problem I´m having is that when I generate cards to fill my card-columns div:

while($row = $categorias->fetch_assoc()) {
  $imagen = $row["Imagen"];
  $categoria = $row["Categoria"];
  echo "<div class='card'>";
  echo "<img class='card-img-top' src='./img/$imagen' alt='$categoria'>";
  echo "<div class='card-body'>";
  echo "<form action='go.php' method='post'>";
  echo "<h5 class='card-title'>$categoria</h5>";
  echo "<input type='hidden' name='producto' id='hiddenField' value='$categoria'>";
  echo "<input class='btn' type='submit' value='ver más'>";
  echo "</form>";
  echo "</div>";
  echo "</div>";
}

it orders them upside down instead of from left to right side, the css I use for the card-colums:

/*col-sm*/
@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}
/*col-md*/
@media (min-width: 768px) {
    .card-columns {
        column-count: 2;
    }
}
/*col-lg*/
@media (min-width: 992px) {
    .card-columns {
        column-count: 3;
    }
}
/*col-xl*/
@media (min-width: 1200px) {
    .card-columns {
        column-count: 4;
    }
}

I have to say that I´m pretty bad when it comes to css, I still dont get used to it.

Answer 1

Instead of using column-count css, use col-* class of bootstrap.

while($row = $categorias->fetch_assoc()) {
  $imagen = $row["Imagen"];
  $categoria = $row["Categoria"];
  echo "<div class='col-6 col-sm-4 col-md-3'>";
  echo "<div class='card mb-2'>";
  echo "<img class='card-img-top' src='./img/$imagen' alt='$categoria'>";
  echo "<div class='card-body'>";
  echo "<form action='go.php' method='post'>";
  echo "<h5 class='card-title'>$categoria</h5>";
  echo "<input type='hidden' name='producto' id='hiddenField' value='$categoria'>";
  echo "<input class='btn' type='submit' value='ver más'>";
  echo "</form>";
  echo "</div>";
  echo "</div>";
  echo "</div>";
}

PS Do not forget to add row and container divs on your page, to make it works perfectly.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class='col-6 col-sm-4 col-md-3'> <div class="card mb-2"> <img class='card-img-top' src='./img/$imagen' alt='$categoria'> <div class='card-body'> <form action='go.php' method='post'> <h5 class='card-title'>$categoria</h5> <input type='hidden' name='producto' id='hiddenField' value='$categoria'> <input class='btn' type='submit' value='ver más'> </form> </div> </div> </div> <div class='col-6 col-sm-4 col-md-3'> <div class="card mb-2"> <img class='card-img-top' src='./img/$imagen' alt='$categoria'> <div class='card-body'> <form action='go.php' method='post'> <h5 class='card-title'>$categoria</h5> <input type='hidden' name='producto' id='hiddenField' value='$categoria'> <input class='btn' type='submit' value='ver más'> </form> </div> </div> </div> <div class='col-6 col-sm-4 col-md-3'> <div class="card mb-2"> <img class='card-img-top' src='./img/$imagen' alt='$categoria'> <div class='card-body'> <form action='go.php' method='post'> <h5 class='card-title'>$categoria</h5> <input type='hidden' name='producto' id='hiddenField' value='$categoria'> <input class='btn' type='submit' value='ver más'> </form> </div> </div> </div> <div class='col-6 col-sm-4 col-md-3'> <div class="card mb-2"> <img class='card-img-top' src='./img/$imagen' alt='$categoria'> <div class='card-body'> <form action='go.php' method='post'> <h5 class='card-title'>$categoria</h5> <input type='hidden' name='producto' id='hiddenField' value='$categoria'> <input class='btn' type='submit' value='ver más'> </form> </div> </div> </div> <div class='col-6 col-sm-4 col-md-3'> <div class="card mb-2"> <img class='card-img-top' src='./img/$imagen' alt='$categoria'> <div class='card-body'> <form action='go.php' method='post'> <h5 class='card-title'>$categoria</h5> <input type='hidden' name='producto' id='hiddenField' value='$categoria'> <input class='btn' type='submit' value='ver más'> </form> </div> </div> </div> <div class='col-6 col-sm-4 col-md-3'> <div class="card mb-2"> <img class='card-img-top' src='./img/$imagen' alt='$categoria'> <div class='card-body'> <form action='go.php' method='post'> <h5 class='card-title'>$categoria</h5> <input type='hidden' name='producto' id='hiddenField' value='$categoria'> <input class='btn' type='submit' value='ver más'> </form> </div> </div> </div> <div class='col-6 col-sm-4 col-md-3'> <div class="card mb-2"> <img class='card-img-top' src='./img/$imagen' alt='$categoria'> <div class='card-body'> <form action='go.php' method='post'> <h5 class='card-title'>$categoria</h5> <input type='hidden' name='producto' id='hiddenField' value='$categoria'> <input class='btn' type='submit' value='ver más'> </form> </div> </div> </div> </div> </div>