220061
Well-Known Coder
Hello I'm tring to put all my divs next to eachother
currently my page looks like this
there are a lot of these t=divs and I want to put them next to each other so I thought of using grid but that makes them like this:
I'm not that good with grid so how should I be able to fix this. I have been trying for a while now. how can I put my divs next to eachother
code:
currently my page looks like this
there are a lot of these t=divs and I want to put them next to each other so I thought of using grid but that makes them like this:
I'm not that good with grid so how should I be able to fix this. I have been trying for a while now. how can I put my divs next to eachother
code:
CSS:
<style>
header{
background-image: url("brood.jpg");
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
section{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
background-color: orange;
/* dit doet niks */
/* grid-column: 1;
grid-row: 2 / 5; */
}
.wrapper{
display: flex;
justify-content: center;
padding-top: 5px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: black;
color: white;
cursor: pointer;
padding: 25px;
border-radius: 50px;
}
#myBtn:hover {
background-color: #555;
}
</style>
<body>
<!-- Navigation-->
<?php include "navbar.php"; ?>
<?php if(isset($_SESSION['USER_ID'])){ ?>
<!-- Header-->
<header class="bg-dark py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="text-center text-white"> <!--Het werkt -->
<h1 class="display-4 fw-bolder">Goedemorgen, <?php echo $_SESSION['USERNAME'];?></h1>
<p class="lead fw-normal text-white mb-0">Quantity kan nog niet veranderd worden.</p>
</div>
</div>
</header>
<?php
} else {
?>
<!-- Header-->
<header class="bg-dark py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="text-center text-white"> <!--het werkt-->
<h1 class="display-4 fw-bolder">Goedemorgen, Gast</h1>
<p class="lead fw-normal text-white mb-0">Quantity kan nog niet veranderd worden.</p>
</div>
</div>
</header>
<?php
}
?>
<!--miscchien dit toch in een whileloop gooien dat zal ook de code korter maken-->
<!-- Section-->
<button onclick="topFunction()" id="myBtn" title="Go to top">↑</button>
<!-- <div class="wrapper">
<input placeholder="broodjes naam" type="text" id="search" onkeydown="key_down()">
<input type="button" value="Go" onclick="search(document.getElementById('search').value)">
</div> -->
<div class="wrappper">
<div class="input-group">
<input type="search" class="form-control rounded" id="search" placeholder="Search" aria-label="Search" aria-describedby="search-addon" onkeydown="if(event.keyCode == 13) document.getElementById('buttonSearch').click()"/>
<button type="button" id="buttonSearch" class="btn btn-outline-primary" onclick="search(document.getElementById('search').value)">search</button>
</div>
</div>
<?php
include "config.php";
$sql = 'SELECT * FROM broodjes';
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result(); // get the mysqli result
while($row = mysqli_fetch_assoc($result)){
echo ' <section class="py-5">
<div class="container1 px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image dit kan later nog wel-->
<div class="fw-image">
<img class="card-img-top" src="brood.webp" alt="..." />
</div>
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<div class="test1">
<input type="hidden" name="broodjes_ID" value='. $row['broodjes_ID'] . '/>
</div>
<!-- Product name-->
<div class="test3">
<input type="hidden" name="broodnaam" value='. $row['broodnaam'] . '/>
<h5 class="fw-bolder">'.$row['broodnaam']. '</h5>
</div>
<!-- Product price-->
<div class="test2">
<input type="hidden" name="broodnaam" value='. $row['prijs'] . '/>
<h3> Prijs: </h3> <h3 class="fw-price"> €'.$row['prijs']. '</h3><br>
</div>
<!--voorraad-->
';
if($row['voorraad'] == 0){
echo '<h3 class="fw-voorraad" style="color: red;"> uitverkocht</h3><br>';
}else{
//link die misschien kan helpen https://www.withinweb.com/info/a-shopping-cart-using-php-sessions-code/
$broodjes = $row['broodjes_ID'];
echo ' Voorraad: '.$row['voorraad'].'<br>
</div>
</div>
<!-- Product actions-->
<form action="cart.php?broodjes_ID='. $broodjes.'" method="POST" name="broodjes" value=""
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><button class="btn btn-outline-dark mt-auto shop-item-button" type="submit" name="add_to_cart">Bestellen</button></div>
</div>
</form>
';
}
echo '</div>
</div>
</div>
</div>
</section>';
}
