Bootstrap snippet: Testimonials

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: testimonials



<div class="container"> <div class="row"> <div class="col-md-4 margin-btm-20"> <div class="quote dark"> <blockquote> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </blockquote> </div> <div class="quote-footer text-right"> <div class="quote-author-img"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> </div> <h4>Rakesh Sharma</h4> <p> <strong>Design_mylife</strong> </p> </div> </div><!--colored quote box col--> <div class="col-md-4 margin-btm-20"> <div class="quote green"> <blockquote> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </blockquote> </div> <div class="quote-footer text-right"> <div class="quote-author-img"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt=""> </div> <h4>Rakesh Sharma</h4> <p> <strong>Design_mylife</strong> </p> </div> </div><!--colored quote box col--> <div class="col-md-4 margin-btm-20"> <div class="quote dark"> <blockquote> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </blockquote> </div> <div class="quote-footer text-right"> <div class="quote-author-img"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt=""> </div> <h4>Rakesh Sharma</h4> <p> <strong>Design_mylife</strong> </p> </div> </div><!--colored quote box col--> </div><!--testimonials row--> </div> <div class="container"> <div class="row"> <div class="col-md-4 margin-btm-20"> <div class="quote dark"> <blockquote> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </blockquote> </div> <div class="quote-footer text-right"> <div class="quote-author-img"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </div> <h4>Rakesh Sharma</h4> <p> <strong>Design_mylife</strong> </p> </div> </div><!--colored quote box col--> <div class="col-md-8 margin-btm-20"> <div class="quote green"> <blockquote> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </blockquote> </div> <div class="quote-footer text-right"> <div class="quote-author-img"> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt=""> </div> <h4>Rakesh Sharma</h4> <p> <strong>Design_mylife</strong> </p> </div> </div><!--colored quote box col--> </div><!--testimonials row--> </div>
body{margin-top:20px;} .testimonials-v-2 { padding: 100px 0; overflow: hidden; } .testi-slide { text-align: center; } .testi-slide img { width: 92px; height: 92px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .testi-slide p { margin: 20px 0; font-size: 16px; font-weight: 400; line-height: 30px; font-style: italic; } .testi-slide i { color: #32c5d2; margin-right: 10px; } .testi-slide h4 { font-weight: 400; font-size: 16px; font-family: "Lato", sans-serif !important; font-style: italic; } .testi-slide .flex-control-paging li a { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; background: transparent !important; border: 2px solid #ccc; width: 8px; height: 8px; } .testi-slide .flex-control-paging li a.flex-active { background: transparent !important; border: 2px solid #32c5d2; } .quote { position: relative; } .quote blockquote { padding: 0px; border: 0; margin: 0; font-size: 14px; font-style: italic; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; } .quote blockquote p { color: #fff; padding-top: 25px; padding-bottom: 45px; padding-left: 30px; padding-right: 30px; } .quote blockquote:before { content: ""; position: absolute; top: 100%; left: 90px; width: 0; height: 0; border-top: 0.83333em solid #ccc; border-right: 0.86667em solid transparent; } .quote.green blockquote { background-color: #32c5d2; } .quote.green blockquote:before { border-top-color: #32c5d2; } .quote.dark blockquote { background-color: #555; } .quote.dark blockquote:before { border-top-color: #555; } .quote-footer { margin: 10px 0; } .quote-footer .quote-author-img img { float: left; max-width: 90px; width: 90px; height: 90px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-left: -5px; margin-top: -40px; position: relative; z-index: 1; padding: 5px; background-color: #fff; } .quote-footer h4 { font-size: 14px; margin-bottom: 4px; } .quote-footer p { font-weight: 400; font-style: italic; font-size: 14px; }
Dey-Dey

Testimonials

Dey-Dey
  Jun 14th, 10:12
1.6K Views