Gallery Template Example

565 ViewsFreeFrontend.dev

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>

Related Code Examples

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 […]

Our Gallery Page Block

This code snippet creates a carousel using Bootstrap, which is a great way to showcase a gallery of images on […]

Our Portfolio Code Snippet

This code snippet creates a carousel using Bootstrap, which is a great way to showcase a portfolio of images. It […]

Basic Gallery Slider Code

This code snippet creates a basic gallery slider using Bootstrap’s carousel feature. The carousel is set up to only display […]

Gallery Card Slider

This code snippet is a gallery slider component that uses Bootstrap cards in a carousel layout to showcase a collection […]

Gallery Snippet

This code snippet is for a gallery component that displays 4 images surrounding a call to action. It is built […]