<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 col-xs-12"> <div class="blog-grids"> <div class="grid"> <div class="entry-media"> <img src="http://www.csshint.com/wp-content/uploads/2017/09/beautiful-buttons-effect.jpg" alt=""> </div> <div class="entry-body"> <span class="cat">inspiration</span> <h3><a href="#">Beautiful css3 buttons with hover effects</a></h3> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut..</p> <div class="read-more-date"> <a href="#">Read More..</a> <span class="date">3 Hours ago</span> </div> </div> </div> <div class="grid"> <div class="entry-media"> <img src="http://www.csshint.com/wp-content/uploads/2017/05/business-card-1.jpg" alt=""> </div> <div class="entry-body"> <span class="cat">photoshop</span> <h3><a href="#">40+ Best Free Modern Business Card PSD Templates</a></h3> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut..</p> <div class="read-more-date"> <a href="#">Read More..</a> <span class="date">3 Hours ago</span> </div> </div> </div> <div class="grid"> <div class="entry-media"> <img src="http://www.csshint.com/wp-content/uploads/2017/05/blog-theme.jpg" alt=""> </div> <div class="entry-body"> <span class="cat">Wordpress</span> <h3><a href="#">34+ Beautiful Free WordPress Blog Themes</a></h3> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut..</p> <div class="read-more-date"> <a href="#">Read More..</a> <span class="date">3 Hours ago</span> </div> </div> </div> </div> </div> </div> </div>

body{ background-color: #e9eef1; margin: 0px; padding: 0px; } @media (min-width: 1200px){ .container { width: 1170px; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row { margin-right: -15px; margin-left: -15px; } .col-xs-12 { width: 100%; } .blog-grids { overflow: hidden; margin: 0 -15px; } .blog-grids .grid { background-color: #fff; width: calc(33.33% - 30px); float: left; padding: 15px; margin: 20px 15px 15px; border-radius: 10px; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } .entry-media img { border-radius: 10px; width: 100%; max-height: 188px; } .entry-body { padding: 27px 10px; } .entry-body .cat { font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; color: #6220d9; text-transform: uppercase; } .entry-body h3 { font-size: 21px; font-weight: 600; line-height: 1.30em; margin: 3px 0 0.73em; } .entry-body h3 a { color: #41516a; } .entry-body h3 a:hover { color: #6220d9; text-decoration: none; } .entry-body p { margin-bottom: 2em; color: #90949a; line-height: 1.8em; } .read-more-date { position: relative; } .read-more-date a { font-family: "Poppins", sans-serif; font-size: 16px; font-size: 1.06667rem; font-weight: 600; color: #41516a; text-transform: uppercase; } .read-more-date .date { position: absolute; right: 0; color: #90949a; }