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