bootstrap images inside columns not displaying properly in for loop php

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 class="row">
    <?php for($i=1;$i<=19;$i++){?>
    <div class="col-sm-12 col-lg-4" style="text-align:center">
      <img src="n<?=$i?>.jpg" class="img-responsive">
    </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?

Solution

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

Bootstrap V3:

<div class="row" style="display:flex; flex-flow:row wrap;">
    <?php for($i=1;$i<=19;$i++){?>
    <div class="col-sm-12 col-lg-4" style="text-align:center">
      <img src="n<?=$i?>.jpg" class="img-responsive">
    </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 class="row">
    <?php for($i=1;$i<=19;$i++){?>
    <div class="col-sm-12 col-lg-4" style="text-align:center;">
      <img src="n<?=$i?>.jpg" class="img-fluid">
    </div>
    <?php } ?>
</div>