Full Stack Developer Masters Program (54 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (41 Blogs)
  • Comprehensive Java Course (2 Blogs)
  • Java/J2EE and SOA (324 Blogs)
  • Spring Framework (8 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

What is Bootstrap Testimonial Slider and how to design it?

Published on Oct 24,2019 464 Views
7 / 12 Blog from Boostrap

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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.

Comments
0 Comments

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.