I have created a bootstrap page in which I am attempting to showcase images inside bootstrap columns. Below is the code snippet that I have used:
<!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>Although there are 19 images and everything appears fine, there seems to be an issue with the 7th image displaying in a single row on larger screens. You can view the live link here: enter link description here.
If anyone could please point out what might be causing this problem, it would be greatly appreciated.