Fetch info in bootstrap card

Question

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;"><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-whatsapp-square" id="whatsapp"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-facebook-square" id="facebook"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><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></a></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;"><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-whatsapp-square" id="whatsapp"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-facebook-square" id="facebook"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><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></a></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;"><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-whatsapp-square" id="whatsapp"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-facebook-square" id="facebook"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><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></a></div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <?php
    }
    ?>

You probably want to use a loop - what does `$rows` array look like, please show (a sample of) `var_export($rows);` — berend, Feb 12 '21 at 09:06
@berend there is already a loop and $rows is a regular associative array — Your Common Sense, Feb 12 '21 at 09:12
then you just shouldn't duplicate cards, displaying only **one** per database row — Your Common Sense, Feb 12 '21 at 09:36
@YourCommonSense if I will not duplicate the cards then it just changes rows and I want to display 3 columns per row. — Shivendra Pratap Singh, Feb 12 '21 at 09:58

ajCary · Answer 1 · 2021-02-12T10:11:36.997

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;"><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-whatsapp-square" id="whatsapp"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><i class="fab fa-facebook-square" id="facebook"></i></a><a href="extra.php?ii=<?php echo $rows['0']?>"><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></a></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
?>

my bad it's different but you don't need no such tricks with bootstrap — Your Common Sense, Feb 12 '21 at 09:36
@YourCommonSense Agreed, you can flow a card at a time in each loop iteration and handle row splits in BS. A minus 1 is pretty harsh for a working PHP solution though as it is literally what the OP asked for. Looking forward to your full BS4 solution. — ajCary, Feb 12 '21 at 09:44
this is not working. It displays the next card in the next row instead of the next column. — Shivendra Pratap Singh, Feb 12 '21 at 09:55
@YourCommonSense I tried to search it on google but non of them worked specifically for my needs that's why I posted it here. — Shivendra Pratap Singh, Feb 12 '21 at 09:57
I didn't tell the OP to use Google. I told *you* to use Google if you want a BS4 solution you asked from me. — Your Common Sense, Feb 12 '21 at 10:01
@ShivendraPratapSingh edited answer to add a missing in the html inside the loop. Hopefully fixes. — ajCary, Feb 12 '21 at 10:15

Fetch info in bootstrap card

1 Answers1