<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 ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Media Testimonials</h1>
<p class="lead">These tesimonials use Bootstrap's media tag, plus some enhancements to make them look like real testimonials!</p>
<h4 style="margin-top:60px">Large Testimonial (for large amounts of praise)</h4><hr>
<div class="media media-testimonial">
<div class="media-left">
<a href="#">
<img src="http://placehold.it/96x96">
</a>
</div>
<div class="media-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac consectetur ipsum. Vestibulum ullamcorper ipsum neque, sed convallis ipsum posuere blandit.
Sed mollis interdum ex, vitae lobortis mi euismod non. In hendrerit quam sed ultrices tincidunt. In a nibh risus. Ut mattis mi non lobortis tincidunt.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed posuere velit eget ligula posuere, quis ultricies risus tristique.
Nunc nec euismod arcu, ut sagittis massa. Fusce fermentum, enim ut tristique iaculis, purus urna dictum urna, non dignissim tellus lectus at odio.
</p>
<div class="media-attribution"><em>John Picklepants</em> - Prince Cubicle</div>
</div>
</div>
<h4 style="margin-top:60px">Medium Testimonial (for average amounts of praise)</h4><hr>
<div class="media media-testimonial media-testimonial-med">
<div class="media-left">
<a href="#">
<img src="http://placehold.it/96x96">
</a>
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac consectetur ipsum. Vestibulum ullamcorper ipsum neque, sed convallis ipsum posuere blandit.</p>
<div class="media-attribution"><em>Mary Peachy</em> - Queen of Sales</div>
</div>
</div>
<h4 style="margin-top:60px">Small Testimonial (meh)</h4><hr>
<div class="media media-testimonial media-testimonial-sm">
<div class="media-left">
<a href="#">
<img src="http://placehold.it/96x96">
</a>
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="media-attribution"><em>Steven Alkward</em> - Lord of Business</div>
</div>
</div>
</div>
<h4 style="margin-top:60px">Large Testimonials in Columns</h4><hr>
<div class="row">
<div class="col-md-4">
<div class="media media-testimonial">
<div class="media-left">
<a href="#">
<img src="http://placehold.it/96x96">
</a>
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac consectetur ipsum. Vestibulum ullamcorper ipsum neque, sed convallis ipsum posuere blandit.</p>
<div class="media-attribution"><em>Dirk Jenkins</em> - Queen of Hearts</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media media-testimonial">
<div class="media-left">
<a href="#">
<img src="http://placehold.it/96x96">
</a>
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac consectetur ipsum. Vestibulum ullamcorper ipsum neque, sed convallis ipsum posuere blandit.</p>
<div class="media-attribution"><em>Mindy Minder</em> - Pincess of Papers</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media media-testimonial">
<div class="media-left">
<a href="#">
<img src="http://placehold.it/96x96">
</a>
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac consectetur ipsum. Vestibulum ullamcorper ipsum neque, sed convallis ipsum posuere blandit.</p>
<div class="media-attribution"><em>Gary Jenkins</em> - King of Hearts</div>
</div>
</div>
</div>
</div>
</div>
</div>
.media-testimonial {
width:100%;
margin:0 auto 30px auto;
}
.media-testimonial-med {
width:500px;
}
.media-testimonial-sm {
width:300px;
}
.media-testimonial .media-body {
padding-left:30px;
position:relative;
}
.media-testimonial .media-body:before {
color: #ccc;
content: "\201C";
font-size: 6em;
position:absolute;
top:-28px;
left: -5px;
font-family: Arial, Helvetica, sans-serif;
}
.media-testimonial .media-body p {
margin-bottom:8px;
font-size:14px;
}
.media-attribution {
font-size:90%;
}
.media-attribution em {
font-style:normal;
font-weight:bold;
}
