How to array images in 5 columns?

Hi,
I want to use bootstrap to array all my images in 5 columns.

<div class="container">
   <div class="row">
      <div class="col">
         <?php foreach($rows as $myrow){?>
         <img src="<?php echo $root ?>/public/assets/uploadThumb/<?php echo $myrow['thumb'] ?>">
         <?php } ?>
      </div>
   </div>
</div>

How can I change the code above to do so?

You create one row.
You create one col inside that row.
( Not five col’s. )

So, you want to display all of the data in a max of five cols? So, just set the img size to width: 18%.
I chose 18 percent as 20% (1/5th) often causes trouble with spacing. This would work, although not the best way. I would do it more like this:

         <?php foreach($rows as $myrow){?>
         <div style="width: 18%; margin-left: 1%; margin-right: 1%;"><img src="<?php echo $root ?>/public/assets/uploadThumb/<?php echo $myrow['thumb'] ?>"></div>
         <?php } ?>

This would make some spacing between each image and make it look nicer. Try something like that.

1 Like

Did that answer your question? Or did you withdraw because you solved it another way?

Normally on this site, you post your answer and do not withdraw. That way, if someone else has the same issue, they can see how you solved it and your answer might help them.

2 Likes

The answer was great and helpful.

Sponsor our Newsletter | Privacy Policy | Terms of Service