Bootstrap 5 Testimonial Carousel Slider

In this blog, We will share a testimonial slider snippet. We will learn how to create a testimonial slider using Bootstrap 5. Before collecting the source code of this snippet, I will suggest you watch the video tutorial below. it will help you to understand the code you will get. There are lots of videos on bootstrap, javascript, and many other things on our YouTube channel. If you like what you see then you can subscribe to the channel.

I hope you have watched the video above about the Bootstrap 5 testimonial slider. What is Testimonial Slider? Your previous clients' comments about your services are contained in a testimonial slider. Now you may question why I would add this slider to my website. This is because the world we live in today is very competitive. To run a business you need to focus on client satisfaction. When a satisfied client is satisfied with your service, he will definitely give good feedback to the organization. If you add this feedback in the form of a slider on your website. Your future customers will see them and their trust in you will increase. It makes your site more trustworthy and increases the trust of new visitors.

You May Also Like:

Bootstrap 5 Testimonial Carousel Slider [ Source code ]:

The first thing you should do is to make a couple of files. There are two files, one is an HTML file and the other is a CSS file. The external file needs to be attached to the HTML document. In the video, you can see how to add the Bootstrap 5 js and CSS CDN to the project. You can open the project in the browser if you want and see if it is working or not. If the code isn't working, the source code needs to be downloaded from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 5 Testimonial Slider</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="testimonial-area">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<div class="section-header text-center">
						<h4>Testimonials</h4>
						<h2>What Clients Says</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat at animi unde, et, obcaecati eius.</p>
					</div>
				</div>
				<div class="col-sm-12">
					<div class="carousel slide" data-bs-ride="true" id="carouselExampleIndicators">
						<div class="carousel-indicators">
							<button aria-label="Slide 1" class="active" data-bs-slide-to="0" data-bs-target="#carouselExampleIndicators" type="button"></button> <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#carouselExampleIndicators" type="button"></button> <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#carouselExampleIndicators" type="button"></button>
						</div>
						<div class="carousel-inner">
							<div class="carousel-item active">
								<div class="icon-area">
									<i class="fa fa-comments"></i>
								</div>
								<div class="content text-center">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis necessitatibus laborum numquam consequuntur possimus magnam expedita ipsam illum voluptatem quia assumenda placeat, at asperiores vitae obcaecati. Reprehenderit nesciunt voluptatem excepturi, libero ipsum tempora perspiciatis.</p>
									<div class="person"><img alt="" src="2.jpg"></div>
									<h5>David Jones</h5>
									<h6>Web Developer</h6>
								</div>
							</div>
							<div class="carousel-item">
								<div class="icon-area">
									<i class="fa fa-comments"></i>
								</div>
								<div class="content text-center">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis necessitatibus laborum numquam consequuntur possimus magnam expedita ipsam illum voluptatem quia assumenda placeat, at asperiores vitae obcaecati. Reprehenderit nesciunt voluptatem excepturi, libero ipsum tempora perspiciatis.</p>
									<div class="person"><img alt="" src="3.jpg"></div>
									<h5>Martin Thomas</h5>
									<h6>Graphics Designer</h6>
								</div>
							</div>
							<div class="carousel-item">
								<div class="icon-area">
									<i class="fa fa-comments"></i>
								</div>
								<div class="content text-center">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis necessitatibus laborum numquam consequuntur possimus magnam expedita ipsam illum voluptatem quia assumenda placeat, at asperiores vitae obcaecati. Reprehenderit nesciunt voluptatem excepturi, libero ipsum tempora perspiciatis.</p>
									<div class="person"><img alt="" src="4.jpg"></div>
									<h5>Luke Jobs</h5>
									<h6>UI/UX Designer</h6>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
	</script> 
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js">
	</script>
</body>
</html>

ADD CSS:

.testimonial-area {
	padding: 80px 0;
}
.section-header h4 {
	color: #f75023;
	font-weight: 600;
}
.section-header {
	padding-bottom: 15px;
}
.section-header h2 {
	font-weight: 700;
}
.section-header p {
	color: #6f6b80;
	width: 40%;
	margin: auto;
}
.icon-area {
	text-align: center;
}
.icon-area i {
	color: #f75023;
	font-size: 80px;
	margin-bottom: 20px;
}
.content p {
	color: #6f6b80;
	width: 60%;
	margin: auto;
}
.person {
	width: 100px;
	height: 100px;
	display: block;
	margin: auto;
	border-radius: 50%;
	overflow: hidden;
	border: 5px solid #f75023;
	margin-top: 50px;
}
.person img {
	width: 100%;
}
.content h5 {
	font-weight: 900;
	margin-top: 15px;
}
.testimonial-area {
	background: url(1.jpg);
	background-size: cover;
	background-position: center;
}
.carousel-indicators {
	bottom: -80px;
}
.carousel-indicators [data-bs-target] {
	width: 60px;
	height: 10px;
	background-color: #f75023;
}
@media (min-width: 768px) and (max-width: 991px) {
	.section-header p {
		width: 85%;
	}
	.content p {
		width: 95%;
	}
}
@media (max-width: 767px) {
	.testimonial-area {
		padding: 30px 0;
	}
	.section-header p {
		width: 95%;
	}
	.content p {
		width: 100%;
	}
	.icon-area i {
		font-size: 50px;
	}
}

I am hoping you have implemented the code correctly. There are lots of snippets on this website. Clicking on the "load more" button on our homepage will allow you to get to those. You can share the articles and snippets on this website with other people if you enjoy them. Thank you for visiting our website, we're happy you did.

DOWNLOAD CODE

Bootstrap 5 Testimonial Carousel Slider [ Source code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 5 Testimonial Carousel Slider

Bootstrap 5 Testimonial Carousel Slider [ Source code ]:

You might like

Post a Comment

Post a Comment

Contact Form