Categories
Bootstrap Database Development

how do i make my image cards responsive using images from my database and using bootstrap 4?

Trying to make my image cards or whatever you call them responsive. I need 4 cards to be next to each other and then its just gonna start over again under. I can only get it to work if i use images thats not from the database, once i try to make it from the database the image just stack on top of each other.

I’ve tried multiple things from this site and other sites but nothing work or is not even close to what im doing.

<div class="container">
   <div class="row">
     <div class="card-deck">
         <div class="card">
             <div class="image-fluid gallery-container">
                 <?php
                     include_once '.../...';

                     $sql = "SELECT * FROM ... ORDER BY ... DESC";
                     $stmt = mysqli_stmt_init($conn);
                       if (!mysqli_stmt_prepare($stmt, $sql)) {
                             echo "SQL statement failed!";
                         } else {
                      mysqli_stmt_execute($stmt);
                   $result = mysqli_stmt_get_result($stmt);

                  while ($row = mysqli_fetch_assoc($result)) {
                       echo '

                   <a href="#">
                    <div class="card-img-top img-responsive img-thumbnail" style="background- 
                     image: url(img/gallery/' . $row["imgFullNameGallery"] . ');"></div>
                    <div class="card-body">
                        <h5 class="card-title">' . $row["titleGallery"] . '</h5>
                        <p class="card-text">' . $row["descGallery"] . '</p>
                    </div>
                  </a>';
        }
    }
    ?>
        </div>
</div>
 </div>
</div>
   </div> 

css

.card-deck {
 margin: 0 -15px;
 justify-content: space-between;
 }

.card-deck .card {
  margin: 0 0 1rem;
}

     @media (min-width: 576px) and (max-width: 767.98px) {
  .card-deck .card {
  -ms-flex: 0 0 48.7%;
     flex: 0 0 48.7%;
}
}

    @media (min-width: 768px) and (max-width: 991.98px) {
    .card-deck .card {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
 }
}

    @media (min-width: 992px)
 {
    .card-deck .card {
     -ms-flex: 0 0 24%;
    flex: 0 0 24%;
   }
 }

Leave a Reply

Your email address will not be published. Required fields are marked *