<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid" style="padding: 20px 40px; background-color: #F6F6F6;"> <div class="row"> <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2"> <div class="thumbnail"> <a href="#" title="Visit design"> <img alt="" class="img-responsive" src="https://www.iliketowastemytime.com/sites/default/files/imagecache/blog_preview/golden-gate-bridge-san-francisco-wallpaper-iltwmt.jpg"> </a> <a href="#" title="Visit UserName's profile"> <img width="40" height="40" class="img-rounded" alt="" src="https://www.threefifty.ca/images/threefifty-logo-lg.jpg"> </a> <h3> <a href="#" title="Title goes here">Title goes here</a><br> <small>(6h ago) <a href="#" title="Visit UserName's profile">UserName</a></small> </h3> <div class="stats"> <small> <span><a href="#"> <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> 1 </a></span> <span><a href="#"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span>2</span></a></span> </small> </div> </div> </div>

/* Card */ .thumbnail { padding-bottom: 4px; border-radius: 3px; line-height: 13px; border: 1px solid #EEE; position: relative; box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.034); transition: all 0.25s ease; } .thumbnail a:hover { text-decoration: none; } .thumbnail:hover { box-shadow: 1px 2px 15px rgba(116, 189, 226, 0.25); transition: all 0.35s ease; } .thumbnail h3 { font-size: 90%; margin: 0 0 0 3px; padding: 8px 10px 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: 600; line-height: 18px; } .thumbnail h3 a { color: #444; } .thumbnail h3 a:hover { color: #EF6644; } .thumbnail img.img-rounded { margin: 4px 4px 0 0; float: left; border-radius: 3px; } .thumbnail small { font-size: 85%; color: #999; padding: 0 0 5px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .thumbnail small a { color: #999; text-decoration: none; } .thumbnail small a:hover { color: #EF6644; } .thumbnail .stats { line-height: 14px; bottom: 5px; right: 10px; position: absolute; background-color: #FFF; padding-left: 10px; } .thumbnail .stats a { font-size: 95%; color: #BBB; text-decoration: none; } .thumbnail .stats span { margin-left: 3px; }