Columns wont align Horizontally in Bootstrap 5 - PHP

SqueezyAbby
January 8, 2023
212 views
0 votes
2 Answers

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

Answers

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>

<?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

?>

Please signup or login to give your own answer.

Click here to cancel reply.

Columns wont align Horizontally in Bootstrap 5 – PHP

Answers