Hi all,
I have a page that uses bootstrap to displays 15 images of different sizes but they don’t look very nice on the page:
Which is the best to display these images so they look nice & tidy on the page ?
This is the code I used so far:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/fa6d8de28f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css"
type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<title>KeenLearner Birmingham</title>
<a class="navbar-brand" href="index.html">KeenLearner</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu"><span
<i class="fa-solid fa-bars"></i></span></button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="gallery.html" class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a href="entertainment.html" class="nav-link">Entertainment</a>
</li>
</ul>
</div>
</nav>
</header>
<!--main---------------------------------------------->
<main>
<div class="container mt-4">
<h1 class="display-1 text-center mb-4">
<strong>
Gallery
</strong>
</h1>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/boulton-watt-murdoch.png" alt="boulton-watt-murdoch.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/library.png" alt="library.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/rotunda.png" alt="rotunda.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/canal.png" alt="canal.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/birmingham-street.png" alt="birmingham-street.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/evening-view.png" alt="evening-view.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/guardian.png" alt="guardian.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/new-street-at-night.png" alt="new-street-at-night.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/st-martins.png" alt="st-martins.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/birmingham-townhall.png" alt="birmingham-townhall.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/high-ropes.png" alt="high-ropes.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/jewellery-quarter-shops.png" alt="jewellery-quarter-shops.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/shopping-mall-art.png" alt="shopping-mall-art.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/skyline-shopping-mall.png" alt="skyline-shopping-mall.png">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<img class="img-fluid shodow rouded mb-4 gallery-img" src="assets/images/birmingham-cathedral.png" alt="birmingham-cathedral.png">
</div>
</div>
</div>
</main>
<!--footer-->
<footer class="container-fluid">
<div id="footer-details" class="row">
<div class="col">
<ul>
<li>
<a href="https://www.facebook.com/" target="_blank" rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)">
<i class="fa-brands fa-facebook"></i></a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank" rel="noopener"
aria-label="Visit our Instagram page (opens in a new tab)">
<i class="fa-brands fa-instagram"></i></a>
</li>
<li>
<a href="https://www.youtube.com/" target="_blank" rel="noopener"
aria-label="Visit our YouTube page (opens in a new tab)">
<i class="fa-brands fa-youtube-square"></i></a>
</li>
<li>
<a href="https://www.twitter.com/" target="_blank" rel="noopener"
aria-label="Visit our Twitter page (opens in a new tab)">
<i class="fa-brands fa-twitter-square"></i></a>
</li>
</ul>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>