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">
<section id="testimonials" class="content-first">
<div class="container bootstrap snippet">
<h1 class="text-center">Testimonials</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in turpis quam. Nulla quis eleifend lectus.</p>
<hr>
<div class="row">
<!-- TESTIMONIAL 1 - START -->
<div class="col-sm-6">
<div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle" src="https://bootdey.com/img/Content/HexGames349.jpg" alt=""></a>
<div class="media-body">
<h4 class="media-heading">El Grone's</h4>
<span>Webdesigner</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat est. Donec lobortis interdum volutpat. Maecenas bibendum dui quis pharetra tincidunt. Praesent posuere eu velit at scelerisque.</p>
</div>
</div>
</div>
<!-- TESTIMONIAL 1 - END -->
<!-- TESTIMONIAL 2 - START -->
<div class="col-sm-6">
<div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle" src="https://bootdey.com/img/Content/poof_by_fairlyoddanticosmo-d48epgu.png" alt=""></a>
<div class="media-body">
<h4 class="media-heading">Egg form</h4>
<span>Webdesigner</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat est. Donec lobortis interdum volutpat. Maecenas bibendum dui quis pharetra tincidunt. Praesent posuere eu velit at scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
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
body {
background: #2E95EF;
background-image: -moz-radial-gradient(center 45deg,circle cover, #9BD1FF, #2E95EF);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#9BD1FF), to(#2E95EF));
padding-top: 15%;
}
.content-first {
padding: 5px 0;
color: #FFFFFF;
border-top: 8px inset #333;
border-top: 8px solid rgba(0,0,0,0.1);
box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
}
.media, .media-body {
overflow: hidden;
zoom: 1;
}
#testimonials .media a.pull-left img {
max-width: 100px;
}
#testimonials .media .media-body {
background-color: rgba(0, 0, 0, 0.1);
padding: 15px 20px;
border-radius: 12px;
}
#testimonials .media .media-body h4 {
margin: 0;
font-weight: bold;
font-size: 22px;
}
#testimonials .media .media-body span {
margin: 5px 0 15px;
display: block;
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #333;
}
#testimonials .media .media-body p {
margin: 0;
padding: 5px 0 0;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
text-align: left;
line-height: 25px;
font-size: 14px;
}
Information about this bootstrap snippet
Creator: Dey Dey
Bootstrap version: 3.2.0
Created: Jul 12th 2014, 13:56
Views: 4.1K