<section class="container">
	<h1 class="my-4 text-center text-lg-left">Image Gallery</h1>
	<div class="row gallery">
		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=1">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=1" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=2">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=2" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=3">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=3" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=4">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=4" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=5">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=5" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=6">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=6" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=6">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=6" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=7">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=7" alt="Random Image"></figure>
			</a>
		</div>

		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=8">
				<figure><img class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=8" alt="Random Image"></figure>
			</a>
		</div>
	</div>
</section>
/* Only for demo purposes. */
body {
	font-family: "Fira Sans", sans-serif;
	background-color: #f1f1f1;
	margin: 85px 0;
}
/* Start Gallery CSS */
.thumb {
	margin-bottom: 15px;
}
.thumb:last-child {
	margin-bottom: 0;
}
/* CSS Image Hover Effects: https://www.nxworld.net/tips/css-image-hover-effects.html */
.thumb 
figure img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.thumb 
figure:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
$(document).ready(function() {
	$(".gallery").magnificPopup({
		delegate: "a",
		type: "image",
		tLoading: "Loading image #%curr%...",
		mainClass: "mfp-img-mobile",
		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
		},
		image: {
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
		}
	});
});

External CSS

  1. https://fonts.googleapis.com/css?family=Fira+Sans:400,700
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
  3. https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/popper.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
  4. https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js