Full Stack Developer Masters Program (66 Blogs) Become a Certified Professional

What is Bootstrap Testimonial Slider and how to design it?

Last updated on Nov 25,2020 31K Views

7 / 12 Blog from Boostrap

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.

Let’s begin.

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>

Explanation:

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:

Output- Boostrap Testimonial - Edureka

Output css- Boostrap Testimonial - Edureka

Final Output- Boostrap Testimonial - Edureka

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.

Upcoming Batches For Full Stack Web Development Course
Course NameDateDetails
Full Stack Web Development Course

Class Starts on 2nd November,2024

2nd November

SAT&SUN (Weekend Batch)
View Details
Comments
1 Comment

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

What is Bootstrap Testimonial Slider and how to design it?

edureka.co