Gallery Snippet

604 ViewsFreeFrontend.dev

This code snippet is for a gallery component that displays 4 images surrounding a call to action. It is built with Bootstrap to be responsive and adjust based on screen size and has consistent styling. It could be used as a grid layout with thumbnails for images, which can be clicked to open a larger version in a lightbox or modal. The call-to-action element could be a button for users to take an action, such as making a purchase or it can be used to link to a more detailed gallery. It is an effective way to showcase a collection of images while encouraging user to take a desired action.

<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">
			<div class="col-md-5">
				<div class="mb-4"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
				<div class="mb-4 mb-md-0"><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div>
			<div class="col-md-7">
				<div class="row gy-4">
					<div class="col-md-6">
						<div><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
					</div>
					<div class="col-md-6">
						<div><img alt="" class="img-fluid" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
					</div>
					<div class="col-md-12">
						<div class="bg-light rounded d-flex align-items-center">
							<div class="text-center p-5 p-md-5">
								<h4>A Catchy Title</h4>
								<div class="row align-items-center justify-content-center">
									<div class="col-lg-10 col-xl-6">
										<p class="mt-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis.</p>
									</div>
								</div><a class="btn btn-primary btn-lg mt-4" href="">View Gallery</a>
							</div>
						</div>
					</div>
				</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 […]