Our Portfolio Code Snippet

642 ViewsFreeFrontend.dev

This code snippet creates a carousel using Bootstrap, which is a great way to showcase a portfolio of images. It is set up to display two images at a time and allows the user to navigate through the images by clicking on the left and right arrows. This code is a great way to highlight your work and make it easy for your visitors to view multiple images at once.

<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 Portfolio</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="carousel slide container pointer-event" data-bs-ride="carousel" id="portfolioCarousel2">
			<div class="carousel-inner">
				<div class="carousel-item">
					<div class="row">
						<div class="col-md-6">
							<div class="card border-0 mb-4 mb-md-0">
								<img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png">
								<div class="card-body text-center mt-2">
									<h6>Catchy Title One</h6>
									<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu rhoncus nulla. Aenean elementum.</p>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="card border-0 mb-4 mb-md-0">
								<img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png">
								<div class="card-body text-center mt-2">
									<h6>Catchy Title Two</h6>
									<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu rhoncus nulla. Aenean elementum.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item active">
					<div class="row">
						<div class="col-md-6">
							<div class="card border-0 mb-4 mb-md-0">
								<img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png">
								<div class="card-body text-center mt-2">
									<h6>Catchy Title Three</h6>
									<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu rhoncus nulla. Aenean elementum.</p>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="card border-0 mb-4 mb-md-0">
								<img alt="" class="img-fluid rounded" src="https://freefrontend.dev/assets/square.png">
								<div class="card-body text-center mt-2">
									<h6>Catchy Title Four</h6>
									<p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu rhoncus nulla. Aenean elementum.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#portfolioCarousel2" 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="#portfolioCarousel2" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>
		</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 […]