Gallery Template Example


This code snippet creates a gallery template that includes 5 images and a call-to-action button. It is designed to showcase a collection of images and make it easy for visitors to view them. This code is a great way to create an interactive gallery page on your website and also allow users to take an important action.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-2 mb-lg-4">
			<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
				<span class="text-muted">Showcase</span>
				<h2 class="display-5 fw-bold">Our Gallery</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="row py-3 align-items-center">
			<div class="col-md-6 mt-md-0 mt-4">
				<div class="mb-5 mb-lg-3"><img class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-md-6 ps-md-5">
				<div class="mb-5 mb-lg-3">
					<h4>A Catchy Title</h4>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente accusantium nulla, sequi cupiditate exercitationem sit incidunt rerum explicabo. Soluta beatae esse praesentium exercitationem vero harum pariatur adipisci qui veritatis est!</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p><a class="btn btn-lg btn-primary" href="">View Gallery</a>
				</div>
			</div>
		</div>
		<div class="row mt-2">
			<div class="col-lg-3 col-md-6">
				<div class="mb-3 mb-lg-0"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-lg-3 col-md-6">
				<div class="mb-3 mb-lg-0"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-lg-3 col-md-6">
				<div class="mb-3 mb-lg-0"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-lg-3 col-md-6">
				<div class="mb-3 mb-lg-0"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
		</div>
	</div>
</section>
To top