<div class="container">
        <div id="tcb-testimonial-carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#tcb-testimonial-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#tcb-testimonial-carousel" data-slide-to="1"></li>
                <li data-target="#tcb-testimonial-carousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="row">
                        <div class="col-xs-12">
                           <figure class="clearfix">
                               <div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg"> </div>
                               <div class="col-md-10 col-sm-10 col-xs-12">
                                    <figcaption class="caption">
                                        <p class="text-brand lead no-margin">I can't wait to test this out.</p>
                                        <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                                        <blockquote class="no-margin">
                                            <p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
                                    </figcaption>
                               </div>
                           </figure>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="row">
                        <div class="col-xs-12">
                           <figure class="clearfix">
                               <div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg"> </div>
                               <div class="col-md-10 col-sm-10 col-xs-12">
                                    <figcaption class="caption">
                                        <p class="text-brand lead no-margin">I can't wait to test this out.</p>
                                        <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                                        <blockquote class="no-margin">
                                            <p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
                                    </figcaption>
                               </div>
                           </figure>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="row">
                        <div class="col-xs-12">
                           <figure class="clearfix">
                               <div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"> </div>
                               <div class="col-md-10 col-sm-10 col-xs-12">
                                    <figcaption class="caption">
                                        <p class="text-brand lead no-margin">I can't wait to test this out.</p>
                                        <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                                        <blockquote class="no-margin">
                                            <p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
                                    </figcaption>
                               </div>
                           </figure>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#tcb-testimonial-carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
            <a class="right carousel-control" href="#tcb-testimonial-carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
        </div>
  <br />
  <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>
@brand-color: #b20000;
#tcb-testimonial-carousel {
    a{
        color: @brand-color;
    }
    .text-brand{
        color: @brand-color;
    }
    margin-top: 30px;
    .carousel-indicators .active {
        background: @brand-color;
    }
    .no-margin{
        margin: 0;
    }
    .carousel-indicators li {
        border: 1px solid #ccc;
    }
    .carousel-control {
        color: @brand-color;
        width: 5%;
    }
    .carousel-control:hover,
    .carousel-control:focus {
        color: @brand-color;
    }
    .carousel-control.left,
    .carousel-control.right {
        background-image: none;
    }
    .item{
        padding: 15px 40px;
        background: #f8f8f8;
    }
    .media-object {
        margin: auto;
    }
    @media screen and (max-width: 768px) {
        .media-object {
            margin-bottom: 15px;
        }
    }
}
View Compiled

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
  2. //maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js