Testimonials are appreciations from clients and that are worth to show to your users. The purpose is to showcase your credibility hence expecting convert more users to your customers. Testimonials can be added in a separate page on your site, but a widget will help you inserting the testimonials wherever you want with the links to a separate page. In this article let us create two testimonial sliders using Bootstrap framework.
Bootstrap Testimonial Slider Widgets
We will create sliders with the following styles:
- Auto rotating testimonials slider without photo
- Manual rotating slider with photo
- 1/3 + 2/3 two columns slider
- 1/2 + 1/2 two columns slider
- Full width slider with photo
Manual rotating slider has three styles to show in different widths.
Auto Rotating Bootstrap Testimonial Slider
It is a simple slider with three testimonials and the slides will be moving automatically with the defined interval. Below is how it will look:
Follow the below steps to add Bootstrap testimonial slider on your site:
Step 1 – Adding CSS
Add the below CSS code under the header section of your page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.container {
width:100% !important;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px;
text-align:center;
overflow-x:hidden;
overflow-y:hidden;
}
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
height:10px;
width:10px;
margin-bottom:1px;
}
</style>Step 2 – Adding Script
Add the below script under footer code section of your page. The interval of the slider is defined as 2500ms which can be changed to any duration as you need.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/script">
$(document).ready(function() {
//carousel options
$('#quote-carousel').carousel({
pause: true, interval: 2500,
});
});
</script>Step 3 – Adding HTML
Add the below HTML code inside the body of your page, replace the dummy text with your own content.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<div class="row">
<div class="col-sm-12">
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.”</p>
<small><strong>Vulputate M., Dolor</strong></small>
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="item">
<div class="row">
<div class="col-sm-12">
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.”</p>
<small><strong>Fringilla A., Vulputate Sit</strong></small>
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="item">
<div class="row">
<div class="col-sm-12">
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.”</p>
<small><strong>Aenean A., Justo Cras</strong></small>
</div>
</div>
</div>
<!-- End of Quotes -->
</div>
</div>
</div>
</div>
</div>Manual Rotating Slider
This slider has three different styles as below:
- Two columns 1/3 + 2/3 – first column contains a fixed testimonial and the second column contains a slider.
- Two columns 1/2 + 1/2 – both columns contains a slider.
- Full width slider with photo.
The CSS is combined together for all the above three style since the columns are decided within the HTML code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.testimonials p {
background: #f4f4f4;
border-radius: 5px;
margin-bottom: 25px;
padding: 20px;
position: relative;
font-style: italic;
}
.testimonials p:after {
border-top: 22px solid ;
border-left: 0px solid transparent;
border-right: 22px solid transparent;
left: 60px;
bottom: -22px;
width: 0;
height: 0;
content: "";
display: block;
position: absolute;
border-top-color: #f4f4f4;
border-left-style: inset;
border-right-style: inset;
}
.testimonials .testimonial-info {
min-height: 60px;
}
.testimonials .testimonial-info span {
color: #000000;
font-size: 18px;
}
.testimonials .testimonial-info span em {
color: #777;
display: block;
font-size: 13px;
}
.testimonials .testimonial-info img {
border: 4px solid #f4f4f4;
float: left;
height: 60px;
margin-right: 15px;
padding: 2px;
width: 60px;
}
.testimonials .carousel-indicators {
bottom: 46px;
left: auto;
right: 80px;
width: auto;
}
.testimonials .carousel-indicators li {
border-color: #b3b3b3;
}
.testimonials-arrows {
bottom: 57px;
left: auto;
right: 37px;
width: auto;
position: absolute;
}
.testimonials-arrows a {
color: #b3b3b3;
}
.testimonials-bg-primary p {
background: #bc5e43;
color: #ffffff;
}
.testimonials-bg-primary p:after {
border-top-color: #bc5e43;
}
.testimonials-bg-light p {
background: #ffffff;
}
.testimonials-bg-light p:after {
border-top-color: #ffffff;
}
.testimonials-bg-dark p {
background: #9e4f38;
color: #FFFFFF;
}
.testimonials-bg-dark p:after {
border-top-color: #9e4f38;
}
.portfolio-related-fw {
box-sizing: content-box;
}Ensure to include jQuery and bootstrap.min.js scripts at the footer section of the page. Finally add the following HTML code inside the body of your page.
<!-- Start Testimonials Two Columns Style 1/3 + 2/3 -->
<div class="col-md-4">
<div class="carousel slide testimonials" id="testimonials4">
<div class="carousel-inner">
<div class="item active">
<div class="testimonials-bg-dark col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonial" src="https://img.webnots.com/2015/08/Testimonial1.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Alice Carter
<em>
Javascript Developer
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="testimonials-bg-dark col-md-12">
<p>
Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
</p>
<div class="testimonial-info">
<img alt="Testimonial" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Denise Campbell
<em>
Web Developer, Amazing Designs Ltd.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="testimonials-bg-dark col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonial" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
David Perez
<em>
CEO & Founder, Virtuoso Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="carousel slide testimonials" id="testimonials6">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#testimonials6">
</li>
<li data-slide-to="1" data-target="#testimonials6">
</li>
<li data-slide-to="2" data-target="#testimonials6">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-md-12">
<p>
Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<span class="testimonial-author">
Cristina Hall
<em>
Javascript Developer, Business Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<span class="testimonial-author">
Anthony Watkins
<em>
Web Developer, Amazing Designs Ltd.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="col-md-12">
<p>
Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<span class="testimonial-author">
Jonathan Baker
<em>
CEO & Founder, Virtuoso Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="testimonials-arrows pull-right">
<a class="left" href="#testimonials6" data-slide="prev">
<span class="fa fa-arrow-left"></span>
</a>
<a class="right" href="#testimonials6" data-slide="next">
<span class="fa fa-arrow-right"></span>
</a>
<div class="clearfix"></div>
</div>
</div>
<!-- End Testimonials Two Columns Style 1/3 + 2/3 -->
<!-- Start Testimonials Two Columns Style 1/2 + 1/2 -->
<div class="col-md-6">
<div class="carousel slide testimonials" id="testimonials2">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#testimonials2">
</li>
<li data-slide-to="1" data-target="#testimonials2">
</li>
<li data-slide-to="2" data-target="#testimonials2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="testimonials-bg-light col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial2.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Jessie Rodgers
<em>
Javascript Developer, Business Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="testimonials-bg-light col-md-12">
<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Anthony Watkins
<em>
Web Developer, Amazing Designs Ltd.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="testimonials-bg-light col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Jonathan Baker
<em>
CEO & Founder, Virtuoso Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="testimonials-arrows pull-right">
<a class="left" href="#testimonials2" data-slide="prev">
<span class="fa fa-arrow-left"></span>
</a>
<a class="right" href="#testimonials2" data-slide="next">
<span class="fa fa-arrow-right"></span>
</a>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6">
<div class="carousel slide testimonials" id="testimonials3">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#testimonials3">
</li>
<li data-slide-to="1" data-target="#testimonials3">
</li>
<li data-slide-to="2" data-target="#testimonials3">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="testimonials-bg-primary col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Anthony Watkins
<em>
Javascript Developer, Business Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="testimonials-bg-primary col-md-12">
<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial1.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Cristina Hall
<em>
Web Developer, Amazing Designs Ltd.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="testimonials-bg-primary col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Jonathan Baker
<em>
CEO & Founder, Virtuoso Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="testimonials-arrows pull-right">
<a class="left" href="#testimonials3" data-slide="prev">
<span class="fa fa-arrow-left"></span>
</a>
<a class="right" href="#testimonials3" data-slide="next">
<span class="fa fa-arrow-right"></span>
</a>
<div class="clearfix"></div>
</div>
</div>
<!-- End Testimonials - Two Columns 1/2 + 1/2 -->
<!-- Start Testimonials Full Width -->
<div class="col-md-12">
<div class="carousel slide testimonials" id="testimonials1">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#testimonials-rotate">
</li>
<li data-slide-to="1" data-target="#testimonials1">
</li>
<li data-slide-to="2" data-target="#testimonials1">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-md-12">
<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Cristina Hall
<em>
Javascript Developer, Business Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="col-md-12">
<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Anthony Watkins
<em>
Web Developer, Amazing Designs Ltd.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="col-md-12">
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<div class="testimonial-info">
<img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" />
<span class="testimonial-author">
Jonathan Baker
<em>
CEO & Founder, Virtuoso Inc.
</em>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="testimonials-arrows pull-right">
<a class="left" href="#testimonials1" data-slide="prev">
<span class="fa fa-arrow-left"></span>
</a>
<a class="right" href="#testimonials1" data-slide="next">
<span class="fa fa-arrow-right"></span>
</a>
<div class="clearfix"></div>
</div>
</div>
<!-- End Testimonials Full Width -->Save your changes and view the page on the browser to see elegant testimonial sliders. Ensure to change the dummy content and images with your own.
Leave a Reply
Your email is safe with us.