Columns wont align Horizontally in Bootstrap 5-CodePudding

Im trying to make a Shopping Cart using php and Bootstrap 5. I specified the classes but the items still stacks vertically. I want it to be beside each other and align Horizontally

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shopping cart</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="cart.css">
</head>
<body>
        <div >

        <?php

        $connect = mysqli_connect('localhost','root','1234','cart');
        $query = 'SELECT * FROM products ORDER by id ASC';
        $result = mysqli_query($connect, $query);

        if ($result) {
            if(mysqli_num_rows($result)>0){
                while($product = mysqli_fetch_assoc($result)){
                    ?>
                  <div >
                    <div >
                        <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                            <div >
                                <img  src="<?php echo $product['image']; ?>">
                                <h4 ><?php echo $product['name']; ?></h4>
                                <h4>$ <?php echo $product['price'];  ?></h4>
                                <input type="text" name="quantity"  value="1" />
                                <input type="hidden" name="name" value="<?php echo $product['name']; ?>"/>
                                <input type="hidden" name="price" value="<?php echo $product['price']; ?>"/>
                                <input type="submit" name="add_to_cart"  value="Add to Cart"/>
                            
                            </div>
                        </form>
                    </div>
                    </div>
           
                    <?php 
                }
            }
        }
        ?>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

is there something that im missing?? I tried evrything that i know of T^T

ps. Im still a novice when it comes to Web Developing so please have mercy on me T^T ;3

CodePudding user response：

You have a "row" around each "column", that means each row has only one column. Try to put the "row" outside the loop so multiple columns fall within it. You can have as many columns in a row as you like. Something like this:

<?php

    if ($result) {
        if(mysqli_num_rows($result)>0){
            ?>
            <div >
            <?php
            while($product = mysqli_fetch_assoc($result)){
                ?>
                <div >
                    <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                        <div >
                            <img  src="<?php echo $product['image']; ?>">
                            <h4 ><?php echo $product['name']; ?></h4>
                            <h4>$ <?php echo $product['price'];  ?></h4>
                            <input type="text" name="quantity"  value="1" />
                            <input type="hidden" name="name" value="<?php echo $product['name']; ?>"/>
                            <input type="hidden" name="price" value="<?php echo $product['price']; ?>"/>
                            <input type="submit" name="add_to_cart"  value="Add to Cart"/>
                        
                        </div>
                    </form>
                </div>
                <?php 
            }
            ?>
            </div>
            <?php
         }
    }
    ?>
</div>

CodePudding user response：

remove <div > inside while and put outside while

<?php

if(mysqli_num_rows($result)>0){
        echo '<div >';
        while($product = mysqli_fetch_assoc($result)){
       ?>
        <div >
        <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
           <div >
               <img  src="<?php echo $product['image']; ?>">
               <h4 ><?php echo $product['name']; ?></h4>
               <h4>$ <?php echo $product['price'];  ?></h4>
               <input type="text" name="quantity"  value="1" />
               <input type="hidden" name="name" value="<?php echo $product['name']; ?>"/>
               <input type="hidden" name="price" value="<?php echo $product['price']; ?>"/>
               <input type="submit" name="add_to_cart"  value="Add to Cart"/>
             </div>
          </form>
        </div>
                    
<?php 
    } // end while
   echo '</div>';
} // end if

?>