Gallery Template

544 ViewsFreeFrontend.dev

This code snippet is a template to display a collection of 5 images, such as product images, photographs, or artwork. This kind of component is typically used to showcase a collection of images, such as product images, photographs, or artwork. It can be used in a variety of contexts, such as on an e-commerce website, a photography portfolio, or an art gallery website.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-3 mb-md-5">
			<div class="col-lg-8 col-xxl-7">
				<span class="text-muted">Showcase</span>
				<h2 class="display-5 fw-bold mb-3">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 gy-4">
			<div class="col-md-6 col-xl-4"><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			<div class="col-md-6 col-xl-4">
				<div class="bg-light rounded h-100 d-flex align-items-center">
					<div class="text-center p-5 p-md-3">
						<h4>A Catchy Title</h4>
						<p class="mt-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam.</p>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-xl-4"><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			<div class="col-md-6 col-xl-4"><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			<div class="col-md-6 col-xl-4"><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			<div class="col-md-6 col-xl-4"><img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/rectangle-wide.png"></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 […]