<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-xs-12 col-sm-6 col-md-4 col-lg-3 card">
<a href="#">
<div class="thumbnail">
<img src="http://lorempixel.com/600/400" alt="#">
<div class="caption">
<h3>
Lorem ipsum
<small>
Lorem ipsum dolor sit amet
</small>
</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<button class="btn btn-default" role="button">View More</button>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
<a href="#">
<div class="thumbnail">
<img src="http://lorempixel.com/600/400" alt="#">
<div class="caption">
<h3>
Lorem ipsum
<small>
Lorem ipsum dolor sit amet
</small>
</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<button class="btn btn-default" role="button">View More</button>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
<a href="#">
<div class="thumbnail">
<img src="http://lorempixel.com/600/400" alt="#">
<div class="caption">
<h3>
Lorem ipsum
<small>
Lorem ipsum dolor sit amet
</small>
</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<button class="btn btn-default" role="button">View More</button>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
<a href="#">
<div class="thumbnail">
<img src="http://lorempixel.com/600/400" alt="#">
<div class="caption">
<h3>
Lorem ipsum
<small>
Lorem ipsum dolor sit amet
</small>
</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<button class="btn btn-default" role="button">View More</button>
</div>
</div>
</a>
</div>
</div>
</div>
.row{
padding-top: 10px;
}
/* cards */
.card *:hover{
text-decoration: none;
}
.card .thumbnail{
padding: 0;
border: none;
text-align: center;
border-radius: 0;
-webkit-box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.75);
}
.card .thumbnail .caption{
margin: -20px 20px 20px 20px;
padding: 19px 29px 19px 29px;
position: relative;
background-color: white;
}
.card .thumbnail .caption h3 small{
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
display: block;
padding: 5px;
}
.card .thumbnail .caption h3{
font-family: 'Raleway',sans-serif;
font-weight: 600;
letter-spacing: -1px;
margin-top: 0;
text-transform: uppercase;
font-size: 18px;
}
.card .thumbnail .caption hr{
border-top: 1px solid #333;
margin: 20px 40px;
}
.card .thumbnail .caption p{
font-size: 12px;
line-height: 1.6;
}
.card .thumbnail .caption button{
border-radius: 0;
color: #aaa;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.card .thumbnail .caption button:hover{
background-color: black;
border-color: black;
color: white;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
