<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-sm-12 col-md-12"> <div class="thumbnail"> <img src="http://www.remabledesigns.com/bootsnipp/img/201402031258.png" alt="..."> <a href="http://bootsnipp.com/snippets/featured/portfolio-using-panels" class="btn btn-primary col-xs-12" role="button">View Snippet</a> <div class="clearfix"></div> </div> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> </ul> </div>

.thumbnail { position: relative; padding: 0px; margin-bottom: 20px; } .thumbnail > h4 { padding: 7px 5px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thumbnail h4 .info { position: absolute; top: 0px; right: 0px; font-size: 0.6em; padding-left: 15px; border-top-right-radius: 3px; border-bottom-left-radius: 4px; border-radius: 0px; border-bottom-left-radius: 5px; cursor: pointer; } .thumbnail h4 .info > span { margin-right: 10px; } .thumbnail img { width: 100%; } .thumbnail a.btn { border-top-left-radius: 0px; border-top-right-radius: 0px; }

$(document).ready( function() { $('[data-toggle="tooltip"]').tooltip(); });