Merhaba,

Bu konularda acemiyim.

bootstrap grid sistemi kullanıyor.

ürün 1 - ürün 2 - ürün 3 - ürün 4
ürün 5 - ürün 6 - ürün 7 - ürün 8

şeklinde bir listeleme yapmam lazım grid içinde.

her satır için ayrı sorgu kodu yazdım.

tek sorgu kodu ile bootstrap yapısına uygun nasıl yapabilirim? 8 sonuç çeksem 4 tane yayınlandıktan sonra nasıl alt satıra geçirebilirim.

<div class="container-fluid bg-3 text-center">    
    <div class="row">
<?php
$sql = "SELECT * FROM kategoriler LIMIT 4";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
     
?>
    <div class="col-sm-3">
      <?php echo '<a href="/urunler.php?id='.$row['id'].'">'.$row['isim'].'</a>';?>
      <img src="<?php echo $row['resim'];?>" class="img-responsive" style="width:100%" alt="Image">
    </div>
<?php	  
	      }
}
?>
    
  </div>
</div><br><br><br>

<div class="container-fluid bg-3 text-center">    
    <div class="row">
    <div class="col-sm-3">
      <a href="/urunler.php?id=1">KATEGORİ 1</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=2">KATEGORİ 2</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=3">KATEGORİ 3</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=4">KATEGORİ 4</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    
  </div>
</div><br><br><br>

<div class="container-fluid bg-3 text-center">    
    <div class="row">
    <div class="col-sm-3">
      <a href="/urunler.php?id=5">KATEGORİ 5</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=6">KATEGORİ 6</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=7">KATEGORİ 7</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=8">KATEGORİ 8</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    
  </div>
</div><br><br><br>