CODEWITHSUNDEEP
phphtmlcssbootstrap-4
Mihawk
Mihawk

Reputation: 49

Card-columns Bootstrap

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.

that blank space tho :(

Upvotes: 0

Views: 1183

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

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>";
}

P.S. 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>

Upvotes: 1

Related Questions