Posted By

gorillaagent on 02/02/14


Tagged

3 bootstrap Testimonials


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

gorillaagent


Bootstrap 3 Repsonsive Testimonials Slider


 / Published in: HTML
 

URL: http://gorillaadvertising.net/2014/02/02/bootstrap-3-repsonsive-testimonials-slider/

I utilized the Bootstrap 3 core javascript, css, and html to create a stylish and sleek testimonials slider for a website template I am working on. I was looking around and could not find any out there as examples so I created one and thought I would share. Essentially the testimonial slider is a carousel.

  1. .testimonials h3{
  2. margin-top:25px;
  3. }
  4.  
  5.  
  6. <div class="container" id="testimonials-row">
  7. <div class="row">
  8. <div class="col-md-12 column">
  9. <h2 class="page-header">Testimonials <small>Our Clients Love Us!</small></h2>
  10. <div class="carousel slide" id="testimonials-rotate">
  11. <ol class="carousel-indicators">
  12. <li class="active" data-slide-to="0" data-target="#testimonials-rotate">
  13. </li>
  14. <li data-slide-to="1" data-target="#testimonials-rotate">
  15. </li>
  16. <li data-slide-to="2" data-target="#testimonials-rotate">
  17. </li>
  18. </ol>
  19. <div class="carousel-inner">
  20. <div class="item active">
  21. <div class="col-md-2"><img alt="" src="http://lorempixel.com/400/200" class="img-circle img-responsive"/></div>
  22. <div class="testimonials col-md-10">
  23.  
  24. <h3>
  25. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. - <small>Yayo Dudemous</small>
  26. </h3>
  27.  
  28. </div>
  29.  
  30. <div class="clearfix"></div>
  31. </div>
  32. <div class="item">
  33. <div class="col-md-2"><img alt="" src="http://lorempixel.com/400/200" class="img-circle img-responsive"/></div>
  34. <div class="testimonials col-md-10">
  35.  
  36. <h3>
  37. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. - <small>Yayo Dudemous</small>
  38. </h3>
  39.  
  40. </div>
  41.  
  42. <div class="clearfix"></div>
  43. </div>
  44. <div class="item">
  45. <div class="col-md-2"><img alt="" src="http://lorempixel.com/400/200" class="img-circle img-responsive"/></div>
  46. <div class="testimonials col-md-10">
  47.  
  48. <h3>
  49. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. - <small>Yayo Dudemous</small>
  50. </h3>
  51.  
  52. </div>
  53.  
  54. <div class="clearfix"></div>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="pull-right">
  59. <a class="left" href="#testimonials-rotate" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  60. <a class="right" href="#testimonials-rotate" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a><div class="clearfix"></div>
  61. </div>
  62. </div>
  63. </div>
  64. </div><!--end of container-->
  65. <div class="clearfix"></div>

Report this snippet  

You need to login to post a comment.