Our Gallery Page Block


This code snippet creates a carousel using Bootstrap, which is a great way to showcase a gallery of images on a webpage. It is set up to display one image at a time and scrolls automatically by default. The user can also navigate through the images by clicking on the left and right arrows. This code is a great way to create a focused, interactive gallery page that allows visitors to view images one at a time.

<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 justify-content-between">
			<div class="col-md-6">
				<h2 class="display-5 fw-bold">Catchy Title to Showcase your Gallery</h2>
				<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu rhoncus nulla. Aenean elementum, consectetur adipiscing elit ut rhoncus.</p>
			</div>
			<div class="col-md-5">
				<div class="mt-md-0 mt-3">
					<h6 class="mb-3">Catchy Title One</h6>
					<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu rhoncus nulla. Aenean elementum.</p>
					<h6 class="mb-3">Catchy Title Two</h6>
					<p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu rhoncus nulla. Aenean elementum.</p>
				</div>
			</div>
		</div>
		<div class="carousel slide mt-md-3 pointer-event" data-bs-ride="carousel" id="carouselExampleControls">
			<div class="carousel-inner">
				<div class="carousel-item"><img alt="..." class="d-block w-100" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
				<div class="carousel-item active carousel-item-start"><img alt="..." class="d-block w-100" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
				<div class="carousel-item carousel-item-next carousel-item-start"><img alt="..." class="d-block w-100" src="https://freefrontend.dev/assets/rectangle-wide.png"></div>
			</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleControls" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselExampleControls" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>
		</div>
	</div>
</section>
To top