<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-md-4"> <div class="single-blog-item"> <div class="blog-thumnail"> <a href=""><img src="http://via.placeholder.com/370x275" alt="blog-img"></a> </div> <div class="blog-content"> <h4><a href="#">Lorem ipsum dolor sit amet</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint expedita exercitationem nostrum, eligendi quis, esse quos atque in molestias animi.</p> <a href="" class="more-btn">View More</a> </div> <span class="blog-date">May 03, 2015</span> </div> </div> <div class="col-md-4"> <div class="single-blog-item"> <div class="blog-thumnail"> <a href=""><img src="http://via.placeholder.com/370x275" alt="blog-img"></a> </div> <div class="blog-content"> <h4><a href="#">Lorem ipsum dolor sit amet</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint expedita exercitationem nostrum, eligendi quis, esse quos atque in molestias animi.</p> <a href="" class="more-btn">View More</a> </div> <span class="blog-date">June 03, 2015</span> </div> </div> <div class="col-md-4"> <div class="single-blog-item"> <div class="blog-thumnail"> <a href=""><img src="http://via.placeholder.com/370x275" alt="blog-img"></a> </div> <div class="blog-content"> <h4><a href="#">Lorem ipsum dolor sit amet</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint expedita exercitationem nostrum, eligendi quis, esse quos atque in molestias animi.</p> <a href="" class="more-btn">View More</a> </div> <span class="blog-date">July 03, 2015</span> </div> </div> </div> </div>

img { width: 100%; height: auto; } .single-blog-item { border: 1px solid #dfdede; box-shadow: 2px 5px 10px #dfdede; margin: 15px auto; padding: 5px; position: relative; } .blog-content { padding: 15px; } .blog-content h4 { font-size: 16px; font-weight: 500; margin-bottom: 10px; text-transform: uppercase; } .blog-content h4 a{ color:#777; } .blog-content p{ color: #999; font-size: 14px; font-weight: 300; line-height: 1.3333; } .blog-date{ } .blog-date { position: absolute; background: #337ab7; top: 35px; left: 5px; color: #fff; border-radius: 0 25px 25px 0; padding: 5px 15px; font-weight: 700; } .more-btn { background: #337ab7; border-radius: 2px; display: block; height: 30px; line-height: 30px; margin: 30px auto auto auto; text-align: center; width: 110px; color: #f1f1f1; }