<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="backto"><div class="container">Origional Source: <a href="http://webdeveloperbareilly.in/blog/bootstrap/bootstrap-thumbnail-like-material-design-cards.html">Beautiful Bootstrap Thumbnail like Material Design Cards</a></div></div> <div class="container-fluid cards-row"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://1.bp.blogspot.com/-aFQ-W_KTFWQ/V6BdtpSUy6I/AAAAAAAAAH4/xD_U-BYItSsNvk1UGfROqLBzzU1h32oXQCLcB/s320/4-diwali-greeting-cards-by-ajay-acharya.jpg" alt="Bootstrap Thumbnail: Beautiful Bootstrap Thumbnail like Material Design Cards"> <div class="caption"> <h3>Bootstrap Thumbnail Customization</h3> <p class="card-description"><strong>Bootstrap Thumbnail</strong> Customization Example. Here are customized <strong>bootstrap cards</strong>. We just apply some box shadow and remove border radius.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://1.bp.blogspot.com/-aFQ-W_KTFWQ/V6BdtpSUy6I/AAAAAAAAAH4/xD_U-BYItSsNvk1UGfROqLBzzU1h32oXQCLcB/s320/4-diwali-greeting-cards-by-ajay-acharya.jpg" alt="Bootstrap Thumbnail Customization"> <div class="caption"> <h3>Bootstrap Cards Design</h3> <p class="card-description"><strong>Bootstrap Thumbnail</strong> Customization Example. Here are customized <strong>bootstrap cards</strong>. We just apply some box shadow and remove border radius.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://1.bp.blogspot.com/-aFQ-W_KTFWQ/V6BdtpSUy6I/AAAAAAAAAH4/xD_U-BYItSsNvk1UGfROqLBzzU1h32oXQCLcB/s320/4-diwali-greeting-cards-by-ajay-acharya.jpg" alt="Bootstrap Thumbnail Customization"> <div class="caption"> <h3>Material Design Cards</h3> <p class="card-description"><strong>Bootstrap Thumbnail</strong> Customization Example. Here are customized <strong>bootstrap cards</strong>. We just apply some box shadow and remove border radius.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a></p> </div> </div> </div> </div> </div> </div>

@import"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"; @import"https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700"; body{font-family:'Open Sans Condensed',sans-serif;font-size:18px} .backto{background:#039; padding:12px 0; color:#fff} .backto a{color:#FFF; text-decoration:none} .cards-row{padding-top:40px; padding-bottom:20px; background:#eee} .thumbnail{padding:0; border-radius:0; border:none; box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)} .thumbnail>img{width:100%; display:block} .thumbnail h3{font-size:26px} .thumbnail h3,.card-description{margin:0; padding:8px 0; border-bottom:solid 1px #eee; text-align:justify} .thumbnail p{padding-top:8px; font-size:20px} .thumbnail .btn{border-radius:0; box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); font-size:20px}