<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"> <!-- Sample card 1 --> <div class="col-md-4"> <div class="card"> <a href="#"> <div class="card-header"> <img class="img-responsive" src="http://www-cdn.terminalfour.com/media/responsive-design-image.png"> </div> <div class="card-content"> <p class="card-title">Title card 1 is too long but</p> <p class="card-author">by C&eacutesar</p> </div> <div class="card-action"> <ul class="tools"> <li><span class="glyphicon glyphicon-heart"><span class="tools-item-counter">14</span></span></li> <li><span class="glyphicon glyphicon-comment"><span class="tools-item-counter">5</span></span></li> <li><span class="glyphicon glyphicon-eye-open"><span class="tools-item-counter">2300</span></span></li> </ul> </div> </a> </div> </div> <!-- Sample card 2 --> <div class="col-md-4"> <div class="card"> <a href="#"> <div class="card-header"> <img class="img-responsive" src="http://www-cdn.terminalfour.com/media/responsive-design-image.png"> </div> <div class="card-content"> <p class="card-title">Title card 1</p> <p class="card-author">by C&eacutesar</p> </div> <div class="card-action"> <ul class="tools"> <li><span class="glyphicon glyphicon-heart"><span class="tools-item-counter">14</span></span></li> <li><span class="glyphicon glyphicon-comment"><span class="tools-item-counter">5</span></span></li> <li><span class="glyphicon glyphicon-eye-open"><span class="tools-item-counter">2300</span></span></li> </ul> </div> </a> </div> </div> <!-- Sample card 3 --> <div class="col-md-4"> <div class="card"> <a href="#"> <div class="card-header"> <img class="img-responsive" src="http://www-cdn.terminalfour.com/media/responsive-design-image.png"> </div> <div class="card-content"> <p class="card-title">Title card 1</p> <p class="card-author">by C&eacutesar</p> </div> <div class="card-action"> <ul class="tools"> <li><span class="glyphicon glyphicon-heart"><span class="tools-item-counter">14</span></span></li> <li><span class="glyphicon glyphicon-comment"><span class="tools-item-counter">5</span></span></li> <li><span class="glyphicon glyphicon-eye-open"><span class="tools-item-counter">2300</span></span></li> </ul> </div> </a> </div> </div> </div> </div>

/* * Card component */ .card { box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12); } .card { /* padding: 16px; */ width: 250px; margin: 0 auto; margin-top: 20px; background-color: #FFF; } .card > a { text-decoration: none; color: rgb(115, 115, 115); } .card:hover { opacity: 0.75; } .card > a > .card-header {} .card > a > .card-content { padding: 16px; } .card > a > .card-content > .card-title { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 22px; } .card > a > .card-content > .card-author { color: #777; font-size: 12px; margin-top: -8px; } .card > a > .card-action { min-height: 30px; } /* * Pattern social media tool component */ .card > a > .card-action > .tools { padding: 0 0 0 13px; float: left; } .card > a > .card-action > .tools li { display: inline; color: #777; } .card > a > .card-action > .tools li a { text-decoration: none; color: #777; } .card > a > .card-action > .tools li a, .card > a > .card-action > .tools li span { padding-left: 5px; padding-right: 5px; } .card > a > .card-content > .card-action > .tools li > span > .tools-item-counter { /* styling of the counter */ }