Clients testimonial with small photo

This bootstrap snippet called "Clients testimonial with small photo" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: testimonial,list,clients

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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="https://lorempixel.com/400/400/people/1/">
					</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="https://lorempixel.com/400/400/people/5/">
					</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="https://lorempixel.com/400/400/people/4/">
					</blockquote>
				</div>
			</div><!--/.row-->
		</div><!--/.col-->	
	</div><!--/.row-->
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

.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;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 10th 2014, 18:37

Views: 14.8K

Rated 5/5 based on 2 reviews