"Modern Bootstrap Thumbnail Cards"
Bootstrap 3.3.0 Snippet by YvesWassersleben

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

Related: See More


Questions / Comments: