Fetch info in bootstrap card [duplicate] - php

Question

This question already has answers here:
Bootstrap 3 - style a site with 3 columns per row on medium & large devices and two columns on small
(2 answers)
Closed 2 years ago.
I am trying to display cards but in this way, all three cards are showing the same information whereas I want every card to show specific entries in the database like 1st one the first entry and second one the second then the third one the third then change line and restart to display 4,5,6 entry and so on. Can anyone please help?
include_once('db/connection.php');
$query="select * from news ORDER BY id DESC";
$result=mysqli_query($conn,$query);
?>
<?php
while($rows=mysqli_fetch_array($result))
{
$cc =$rows['category2'];
?>
<div>
<div class="container">
<div class="cust_bloglistintro">
<div class="row">
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['thumbnail'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['title']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['thumbnail'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['title']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['5'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['1']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>

Answer 1

Many ways of doing this, but I've used this approach recently...
<?php
$resultCount=0;
if(mysqli_num_rows($result) >0)
{
?>
<div>
<div class="container">
<div class="cust_bloglistintro">
<div class="row">
<?php
while($rows=mysqli_fetch_array($result))
{
$cc =$rows['category2'];
?>
<div class="col-md-6 col-lg-4 cust_blogteaser" style="padding-bottom: 20px;margin-bottom: 32px;height: 750px;">
<div class="card" data-aos="fade-up" style="height: 700px;"><img class="card-img-top w-100 d-block" src="images/<?php echo $rows['thumbnail'];?>">
<div class="card-body">
<h4 class="card-title"><?php echo $rows['title']; ?></h4><span style="font-family: 'Open Sans', sans-serif;font-size: 12px;margin-bottom: 5px;"><?php echo $rows['3']; ?></span>
<p class="card-text"><?php echo substr($rows['2'],0,400); ?></p><?php if($cc=="bigbites"){?><a class="card-link" href="bigbites.php?ii=<?php echo $rows['0']?>>" target="_top">Read more...</a><?php } else{?><a class="card-link" href="<?php echo $rows['7']; ?>" target="_top">Read more...</a><?php }?>
</div>
<div class="text-center" style="bottom: 10px;"><i class="fab fa-whatsapp-square" id="whatsapp"></i><i class="fab fa-facebook-square" id="facebook"></i><i class="fab fa-linkedin" id="linkedin"></i><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fas fa-share" id="share"></i></div>
</div>
</div>
<?php
$resultCount++;
if ($resultCount % 3 == 0) // start new row
{
?>
</div>
<div class="row">
<?php
}
}
if ($resultCount % 3 != 0) // if we didn't just end a row in the loop, end it now
{
?>
</div>
<?php
}
// now close divs
?>
</div>
</div>
</div>
<?php
} // end of if num_rows>0
?>