<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