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