如何使用bootstrap 4从数据库中显示3列动态数据

Question

Following is my code I am displaying details as 3 columns per row using Bootstrap class row.

I tried like changing div and some condition

<div class="container">
  <?php

  if($lclResult->rowCount() > 0){
    while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
      # code...
      $lclUserName = $row['us_business_name'];
      $lclImage1 = $row['us_image1'];
      $lclCategory = $row['us_category'];
      $lclArea = $row['us_area'];

  ?>
  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
        <div class="card-body">
          <h4 class="card-title"><?php echo $lclUserName?></h4>
          <p class="card-text" style="font-size: 25px;"><?php echo $lclCategory?></p>
          <hr>
          <i class="fa fa-map-marker" style="font-size: 23px;"><span>&nbsp;&nbsp;</span><?php echo $lclArea?></i>
          <!-- <a href="#" class="btn btn-primary">See Profile</a> -->

        </div>
      </div>


 <?php
  }
  ?>
 </div>
 <?php
 } else { 
 ?>
<div class="container">
 <div class="row">
  <div class="col-sm-12">
    <h1> NO RESULT FOUND...</h1>
  </div>
 </div>
</div>

<?php
   }
?>


   </div>  
 </div>

I want to display 3 columns per row to display data. If anyone knows Please guide me with the above code.

Answer 1

Change your code like this

<div class="container">
  <div class="row">
    <?php
if($lclResult->rowCount() > 0){
while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
# code...
$lclUserName = $row['us_business_name'];
$lclImage1 = $row['us_image1'];
$lclCategory = $row['us_category'];
$lclArea = $row['us_area'];
?>
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
        <div class="card-body">
          <h4 class="card-title">
            <?php echo $lclUserName?>
          </h4>
          <p class="card-text" style="font-size: 25px;">
            <?php echo $lclCategory?>
          </p>
          <hr>
          <i class="fa fa-map-marker" style="font-size: 23px;">
            <span>&nbsp;&nbsp;
            </span>
            <?php echo $lclArea?>
          </i>
          <!-- <a href="#" class="btn btn-primary">See Profile</a> -->
        </div>
      </div>
    </div>
    <?php
}
?>
    <?php
} else { 
?>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1> NO RESULT FOUND...
          </h1>
        </div>
      </div>
    </div>
    <?php
}
?>
  </div>  
</div>