skip to Main Content

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 class="container">

        <?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 class="row">
                    <div class="col-sm-4 col-md-3">
                        <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                            <div class="products">
                                <img class="img-fluid" src="<?php echo $product['image']; ?>">
                                <h4 class="text-info"><?php echo $product['name']; ?></h4>
                                <h4>$ <?php echo $product['price'];  ?></h4>
                                <input type="text" name="quantity" class="form-control" 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" class="btn btn-info" 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

2

Answers


  1. 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 class="row">
                <?php
                while($product = mysqli_fetch_assoc($result)){
                    ?>
                    <div class="col-sm-4 col-md-3">
                        <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                            <div class="products">
                                <img class="img-fluid" src="<?php echo $product['image']; ?>">
                                <h4 class="text-info"><?php echo $product['name']; ?></h4>
                                <h4>$ <?php echo $product['price'];  ?></h4>
                                <input type="text" name="quantity" class="form-control" 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" class="btn btn-info" value="Add to Cart"/>
                            
                            </div>
                        </form>
                    </div>
                    <?php 
                }
                ?>
                </div>
                <?php
             }
        }
        ?>
    </div>
    
    Login or Signup to reply.
  2. <?php
    
    if (mysqli_num_rows($result) > 0) {
        echo '<div class="row">';
        while ($product = mysqli_fetch_assoc($result)) {
    ?>
            <div class="col-sm-4 col-md-3">
                <form method="post" action="index.php?action=add&id=<?php echo $product['id']; ?>">
                    <div class="products">
    
                        <input type="hidden" name="name" value="<?php echo $product['name']; ?>" />
                        <input type="hidden" name="price" value="<?php echo $product['price']; ?>" />
    
                        <!-- I think you need rows inside form tag -->
                        
                        <div class="row"> 
                            <div class="col-sm-4 col-md-3">
                                <img class="img-fluid" src="<?php echo $product['image']; ?>">
                            </div>
                            <div class="col-sm-4 col-md-3">
                                <h4 class="text-info"><?php echo $product['name']; ?></h4>
                            </div>
                            <div class="col-sm-4 col-md-3">
                                <h4>$ <?php echo $product['price'];  ?></h4>
                            </div>
                            <div class="col-sm-4 col-md-3">
                                <input type="text" name="quantity" class="form-control" value="1" />
                            </div>
                            <div class="col-sm-4 col-md-3">
                                <input type="submit" name="add_to_cart" class="btn btn-info" value="Add to Cart" />
                            </div>
                        </div> <!-- ./row -->
                    </div>
                </form>
            </div>
    <?php
        } // end while
        echo '</div>';
    } // end if
    
    ?>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search