<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="section-testimonials" class="testimonials"> <div class="container"> <div class="row"> <!-- ////////// Another Carousel Slider //////////--> <div id="testimonials-slider" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#testimonials-slider" data-slide-to="0" class="active"></li> <li data-target="#testimonials-slider" data-slide-to="1" class=""></li> </ol> <!-- Carousel items--> <div class="carousel-inner"> <!-- Testimonial 1--> <div class="item next left"> <div class="col-md-2 col-md-offset-1"> <div class="quote-icon"><img class="img-circle" src="https://placehold.it/90x90" alt="" title=""></div> </div> <div class="col-md-8"> <p class="lead">Well... honestly it doesn"t get much better than this! These guys know what they"re doing!</p> <cite>John Doe, <a href="#">Freelance Journalist</a></cite> </div> </div> <!-- Testimonial 2--> <div class="item active left"> <div class="col-md-2 col-md-offset-1"> <div class="quote-icon"><img class="img-circle" src="https://placehold.it/90x90" alt="" title=""></div> </div> <div class="col-md-8"> <p class="lead">If i had to do it again, i"d definitely go with the same team - that was an amazing experience.</p> <cite>Sarah Jackson, <a href="#">Startup Owner</a></cite> </div> </div> </div> <!-- Carousel navigation arrows--><a href="#testimonials-slider" data-slide="prev" class="carousel-control fui-arrow-left left"></a><a href="#testimonials-slider" data-slide="next" class="carousel-control fui-arrow-right right"></a> </div> <!-- ////////// end of Carousel Slider //////////--> </div> </div> </section>

/* =================================================== */ /* ========== TESTIMONIALS ===================== */ /* =================================================== */ .testimonials { background-color: orange; } .testimonials .quote-icon img { height: 168px; width: 168px; margin-left: -12px; } .testimonials .lead { color: white; padding-top: 24px; } .testimonials cite { color: #ecf0f1; font-size: 18px; font-weight: 300; } .testimonials cite a { color: #ecf0f1; border-bottom: dotted 1px #ecf0f1; } .testimonials { text-align: center; } .testimonials .quote-icon { text-align: center; margin: 0 auto; display: block; } .testimonials img { margin-left: auto; }