People buy a product based on its reviews. Today, with everything available online reviews help in boosting the sales of a product. This is where the bootstrap testimonial slider comes into the picture. In this blog, you shall be learning how to create a bootstrap testimonial slider on a website. Also, this bootstrap testimonial slider can be used as a quote slider too.
In this blog, you will be learning about how to create a bootstrap testimonial slider using HTML, and styling it using CSS.
Understanding using HTML Code
<div class = "container">
<div class = "row">
<div class = "col-md-12">
<div class = "carousel slide" data-ride = "carousel" id = "quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class = "carousel-inner text-center">
<!-- Quote 1 -->
<div class = "item active">
<blockquote>
<div class = "row">
<div class = "col-sm-8 col-sm-offset-2">
<p> Edureka has the best online courses! </p>
<small> Reviewer's Name </small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class = "item">
<blockquote>
<div class = "row">
<div class = "col-sm-8 col-sm-offset-2">
<p> Edureka has the best online courses! </p>
<small> Reviewer's Name </small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class = "item">
<blockquote>
<div class = "row">
<div class = "col-sm-8 col-sm-offset-2">
<p> Edureka has the best online courses! </p>
<small> Someone famous </small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<ol class = "carousel-indicators">
<li data-target = "#quote-carousel" data-slide-to = "0" class = "active"> <img class = "img-responsive " src = "https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
</li>
<li data-target = "#quote-carousel" data-slide-to= "1"> <img class = "img-responsive" src = "https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt = "">
</li>
<li data-target = "#quote-carousel" data-slide-to = "2"><img class = "img-responsive" src = "https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-slide = "prev" href = "#quote-carousel" class = "left carousel-control"><i class = "fa fa-chevron-left"> </i> </a>
<a data-slide = "next" href = "#quote-carousel" class = "right carousel-control"><i class = "fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<a class = "btn btn-primary" href = "http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel"><i class = "fa fa-arrow-left"></i> Back to Article</a>
</div>
The “.carousel slide” class is used to create a carousel slider. To create a text in the center, the “.caraouse-inner text-center” class is used. Next, <blockquote> is used to specify the section that is quoted. Here, it is used to quote the clients’ testimonials. The client’s testimonial is then entered. This is repeated until you have added enough number of testimonials.
Understanding CSS
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 60px;
}
#quote-carousel .carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
#quote-carousel .carousel-indicators {
position: relative;
right: 50%;
top: auto;
bottom: 0px;
margin-top: 20px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 50%;
opacity: 0.4;
overflow: hidden;
transition: all .4s ease-in;
vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
width: 128px;
height: 128px;
opacity: 1;
transition: all .2s;
}
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote p:before {
content: "f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
Explanation
Each division of the HTML code can be customized according to your needs. Simply creation a section and copy-paste the above code and edit it to your requirements.
The final output of your code would look like:
Hope this blog was helpful! In case you have any questions related to bootstrap testimonial slider, drop your queries in the comment section below!
With this, we have come to the end of this article. I hope you understood what is bootstrap testimonial slider and how to design it using HTML and CSS.
Check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
Got a question for us? Please mention it in the comments section of this blog and we will get back to you.