Testimonial Slider using Bootstrap Framework

byCodingFlicks -November 25, 2021

0

Hello friends, I hope you are all well. Today we bring you another beautiful project. If you want to build trust, increase credibility, encourage user engagement, and improve the conversion rate of your website, then a properly designed testimonial plays an important role. Today we will learn how to create a beautiful testimonial slider using the Bootstrap framework. There are many more projects in this blog and you can take a look at them if you want. The video tutorial below shows the step-by-step process of creating the complete snippet.

Video Tutorial:

I hope you guessed what we are going to make by watching the video demo. So what is actually a testimonial carousel or slider? A testimonial slider is the comment of your customers. If a customer is satisfied or dissatisfied with a product or service offered by you and if it is published on your website through a slider in the form of a review, it is called a testimonial carousel.

The testimonial carousel is an integral part of any website. Nowadays this slider is used by every website owner to gain the trust of the customers. Gaining the trust of customers is very important to survive in this competitive world. A nice and attractive testimonial slider basically does just that. However, the slider we are building today is based on the built-in snippet of the Bootstrap framework. This slider is made by modifying the carousel snippet of Bootstrap.

First, we have taken a div called 'testi-area'. Then we took the bootstrap container class and took another div inside it. This div was originally taken to give the slider a custom padding. Then we put the Carousel snippet of Bootstrap and added text and images of our choice. Behind the slider, we used a background image and added a blue overlay. Then the rest of the elements have been styled in accordance with the basic rules of CSS.

You May Also Like:

Testimonial slider with bootstrap carousel [ Source Code ]:

First, add Bootstrap JS and CSS CDN to your project. Then add the latest Jquery CDN. Then add the external CSS file to your project. Copy the source code from the code box below and paste it into your project. If there is a problem with the code, you can also get the source code from the download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Testimonial slider with bootstrap carousel</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="testi-area">
		<div class="container">
			<div class="single-slider">
			    <div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
					<li data-slide-to="1" data-target="#carousel-example-generic"></li>
					<li data-slide-to="2" data-target="#carousel-example-generic"></li>
				</ol><!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<div class="img-area"><img alt="" src="1.jpg"></div>
						<div class="carousel-caption">
							<h3>Mason Doe</h3>
							<h4>CEO, Company One</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae id rerum dolorum temporibus accusamus similique. Saepe cum omnis nisi praesentium voluptate doloremque magnam sequi.</p>
						</div>
					</div>
					<div class="item">
						<div class="img-area"><img alt="" src="2.jpg"></div>
						<div class="carousel-caption">
							<h3>Tyron Jones</h3>
							<h4>GM, Company Two</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae id rerum dolorum temporibus accusamus similique. Saepe cum omnis nisi praesentium voluptate doloremque magnam sequi.</p>
						</div>
					</div>
					<div class="item">
						<div class="img-area"><img alt="" src="3.jpg"></div>
						<div class="carousel-caption">
							<h3>Robert Jones</h3>
							<h4>HRM, Some Company</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum molestiae id rerum dolorum temporibus accusamus similique. Saepe cum omnis nisi praesentium voluptate doloremque magnam sequi.</p>
						</div>
					</div>
				</div><!-- Controls -->
				 <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a>
				 <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
			</div>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

ADD CSS:

body{
    font-family: 'Montserrat', sans-serif;
    background: url(https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100vh;
}
body:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,94,173,0.7);
}
.single-slider {
	padding: 15% 0;
}
.testi-area{
    padding: 50px 0;
    position: relative;
}
.carousel-control.left,
.carousel-control.right{
    background: transparent; 
}
.img-area {
	width: 100px;
	height: 100px;
	margin: auto;
	border: 5px solid #fff;
	border-radius: 25px 0;
	overflow: hidden;
}
.img-area img{
    width: 100%; 
}
.carousel-caption{
    position: static;
    padding-bottom: 15px;
    padding-top: 0; 
}
.carousel-caption h3{
    font-size: 26px;
    margin-bottom: 15px;
    margin-top: 25px; 
}
.carousel-caption h4 {
	color: cornsilk;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
}
.carousel-caption p{
    font-size: 18px;
    margin: auto;
    width: 70%;
    margin-bottom: 10px; 
}
.carousel-indicators{
    bottom: -35px; 
}

We hope you find this project useful. Click on the homepage load button of the website to get more such snippets. Thanks for staying with us. See you in the next project. Thanks for visiting our blog.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.