php - When I fetch data from mysql database it create new row every time instead of single row

Question

instead of creating four card it create new row every time. I use column small 3, i want 4 card listed in one row and fetch data from database as in ecommerce websites

<div class="row container bg-light">
<?php 
while ($result=mysqli_fetch_assoc($link)) {
    echo "<a href='com.php?id=$result[id]' style='text-decoration:none;'>";
        echo "<div class='col-sm-3 bg-white border  rounded shadow'>";
            echo "<div class='bg- m-2 text-center'>";
                echo "<img src='adeolu-eletu-DXYyKCCvWiM-unsplash.jpg' alt='' class='w-75 h-75' >";
                echo "<h3 class=''>$result[name]</h3>";
                echo "<h6 class=''>$result[discription]</h6>";
                echo "<h2 class='text-danger link'>Rs $result[price]</h2>";
                echo "<Button class='btn bg-success '>Order</button>";
                echo "<Button class='btn bg-danger '>Add to Cart</button>";
            echo "</div>";
        echo "</div>";
    echo "</a>";
    echo print_r($result);
}
?>
</div>

Answer 1

Bootstrap requires that columns be children of rows.

You are using a div element for your columns, but are wrapping it an anchor element and then making that anchor a child of the row.

Either put the anchor inside the div, or make the anchor the column in the first place.

… your rows need to be in a container too, not a container in their own right.

<link rel=stylesheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
   <div class="row bg-light">
      <a href='com.php?id=$result[id]' style='text-decoration:none; ' class='col-sm-3 bg-white border  rounded shadow'>
         <div class='bg- m-2 text-center'>
            <h3 class=''>$result[name]</h3>
            <h6 class=''>$result[discription]</h6>
            <h2 class='text-danger link'>Rs $result[price]</h2>
            <Button class='btn bg-success '>Order</button>
            <Button class='btn bg-danger '>Add to Cart</button>
         </div>
      </a>
      <a href='com.php?id=$result[id]' style='text-decoration:none; ' class='col-sm-3 bg-white border  rounded shadow'>
         <div class='bg- m-2 text-center'>
            <h3 class=''>$result[name]</h3>
            <h6 class=''>$result[discription]</h6>
            <h2 class='text-danger link'>Rs $result[price]</h2>
            <Button class='btn bg-success '>Order</button>
            <Button class='btn bg-danger '>Add to Cart</button>
         </div>
      </a>
      <a href='com.php?id=$result[id]' style='text-decoration:none; ' class='col-sm-3 bg-white border  rounded shadow'>
         <div class='bg- m-2 text-center'>
            <h3 class=''>$result[name]</h3>
            <h6 class=''>$result[discription]</h6>
            <h2 class='text-danger link'>Rs $result[price]</h2>
            <Button class='btn bg-success '>Order</button>
            <Button class='btn bg-danger '>Add to Cart</button>
         </div>
      </a>
      <a href='com.php?id=$result[id]' style='text-decoration:none; ' class='col-sm-3 bg-white border  rounded shadow'>
         <div class='bg- m-2 text-center'>
            <h3 class=''>$result[name]</h3>
            <h6 class=''>$result[discription]</h6>
            <h2 class='text-danger link'>Rs $result[price]</h2>
            <Button class='btn bg-success '>Order</button>
            <Button class='btn bg-danger '>Add to Cart</button>
         </div>
      </a>
   </div>
</div>