bootstrap images inside columns not displaying properly in for loop php-CodePudding

i have a bootstrap page where i am trying to display images inside bootstrap columns, i did the following code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>



  <div >
    <?php for($i=1;$i<=19;$i  ){?>
    <div  style="text-align:center">
      <img src="n<?=$i?>.jpg" >
    </div>
    <?php } ?>



  </div>

</body>

</html>

there are 19 images, everything is coming fine except the 7th image which is coming in a single row in large screens. this is the live link:enter link description here

can anyone please tell me what is wrong in here?

CodePudding user response：

Since your code uses bootstrap 3, so flexbox is not used by default.

Bootstrap V3:

<div  style="display:flex; flex-flow:row wrap;">
    <?php for($i=1;$i<=19;$i  ){?>
    <div  style="text-align:center">
      <img src="n<?=$i?>.jpg" >
    </div>
    <?php } ?>
</div>

Better to use bootstarp v4 or v5 with flexbox support so there is no need for the extra CSS.

Bootstrap V4 and V5:

<div >
    <?php for($i=1;$i<=19;$i  ){?>
    <div  style="text-align:center;">
      <img src="n<?=$i?>.jpg" >
    </div>
    <?php } ?>
</div>