HOW TO ALIGN BOOSTRAP CARDS HORIZAONTALLY IN PHP-CodePudding

Am kinda new to php and mysql and been learning it for awhile but am having a problem retrieving data from mysql database. Am using Boostrap for the frontend. Am fetching the cards using the following code;`<?php require 'config.php';

  $sql = "SELECT * FROM contents";
    $query_run = mysqli_query($con, $sql);
    //Check if there is data
    $check_data = mysqli_num_rows($query_run) > 0;

    if($check_data) {
        while($row = mysqli_fetch_array($query_run)) {

            ?>

<div class="card-group">
<div class="container py-5">
                <div class="row mt-4">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="images/<?php echo $row['images'] ?>" class="card-img-top" alt="">
                                    <h2 class="card-title"><?php echo $row['title']; ?></h2>
                                    <h3 class="card-title"><?php echo $row['short_desc']; ?></h3>
                        <p class="card-text">
                        <?php echo $row['long_desc']; ?>
                        </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

       <?php
   }
    }
?>
`

But the cards are aligned vertically not horizontally which is not what i want. As seen here: [1]: https://i.stack.imgur.com/22AZV.png [Vertical Alignment of cards php][1]

I hope I can get an Answer to this. Thanks alot Han

CodePudding user response：

        <div class="card-group">
         <div class="container py-5">
          <div class="row mt-4">
           
            <?php $sql = "SELECT * FROM contents";
              $query_run = mysqli_query($con, $sql);
               //Check if there is data
                $check_data = mysqli_num_rows($query_run) > 0;
    
                 if($check_data) {
                  while($row = mysqli_fetch_array($query_run)) {
    
                 ?>
                 
    <div class="col-md-3">
    <div class="card">
                            <div class="card-body">
                                <img src="images/<?php echo $row['images'] ?>" class="card-img-top" alt="">
                                    <h2 class="card-title"><?php echo $row['title']; ?></h2>
                                    <h3 class="card-title"><?php echo $row['short_desc']; ?></h3>
                        <p class="card-text">
                        <?php echo $row['long_desc']; ?>
                        </p>
                        </div>
                    </div>
</div>
    <?php
       }
        }
    ?>
             
           </div>
         </div>
        </div>

CodePudding user response：

 

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
    
   <div class="row">
   
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   </div>
  
</div>

</body>
</html>

this is simple example your want too this try this also above code

<div class="col-3">
        <div class="card">
        <div class="card-body">
            <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
            <h5>Sample Img</h5>
        </div>
        </div>
       </div>

above code just put only your while loop