Bootstrap snippet: Clients testimonial with small photo

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: testimonial,list,clients

<div class="container bootstrap snippet"> <div class="row"> <h2 class="text-center text-primary">What our clients said about us?</h2> <hr> <div class="col-md-10 col-md-offset-1"> <div class="row testimonials"> <div class="col-sm-4"> <blockquote> <p class="clients-words">Hi there, We just bought bootdey is a nice gallery of free bootstrap snippet</p> <span class="clients-name text-primary">— Amanda corey</span> <img class="img-circle img-thumbnail" src=""> </blockquote> </div> <div class="col-sm-4"> <blockquote> <p class="clients-words">Awesome Bootstrap snippets! Check it out! </p> <span class="clients-name text-primary">— Factory nn (@facnnteam)</span> <img class="img-circle img-thumbnail" src=""> </blockquote> </div> <div class="col-sm-4"> <blockquote> <p class="clients-words">Bootdey looks amazing, i copy paste my snippets for other users very easy, bootdey looks simple</p> <span class="clients-name text-primary">— Big daniel mont</span> <img class="img-circle img-thumbnail" src=""> </blockquote> </div> </div><!--/.row--> </div><!--/.col--> </div><!--/.row--> </div>
.testimonials blockquote { position: relative; background: white; min-height: 150px; margin-top: 20px; margin-bottom: 100px; border: 1px solid #ecedf1; } .testimonials blockquote:before { content: ''; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; border-top: 10px solid #ecedf1; border-left: 10px solid transparent; border-right: 10px solid transparent; } .testimonials blockquote:after { content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -9px; border-top: 9px solid white; border-left: 9px solid transparent; border-right: 9px solid transparent; } .testimonials blockquote img { height: 50px; width: 50px; position: absolute; border: 1px solid #ecedf1; background: white; bottom: -65px; left: 50%; margin-left: -25px; } blockquote p.clients-words { font-size: 14px; } span.clients-name { font-size: 14px; position: absolute; bottom: 10px; right: 10px; }

Clients testimonial with small photo

  Jul 4th 2014, 19:03