<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 ----------> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-4"> <div class="card card-blog shadow-box shadow-hover border-0"><a href="blog-post.html"><img class="card-img-top img-responsive" src="http://www.dkstudio.in/img/portfolio/smspesms.com-small.jpg" alt=""></a> <div class="card-body"> <div class="d-flex align-items-center justify-content-between"> <div class="author d-flex align-items-center"><img class="author-picture rounded-circle icon-md shadow-box" src="../img/avatar/user.png" alt="..."> <p class="small bold my-0">Billie Ramos</p> </div> <nav class="nav"><a href="javascript:;" class="d-flex align-items-center text-secondary mr-3 blog-action blog-favorite"><i class="fas fa-heart text-danger mr-2"></i> <span class="small">731</span> </a><a href="javascript:;" class="d-flex align-items-center text-secondary blog-action blog-bookmark"><i class="far fa-bookmark mr-2"></i> <span class="small">83</span></a></nav> </div> <hr> <p class="card-title regular"><a href="blog-post.html">Extending DashCore Template</a></p> <p class="card-text text-secondary">Amet animi autem commodi, debitis dolore doloribus fugiat illum molestias nesciunt perspiciatis.</p> <p class="bold small text-secondary my-0"><small>Jun 14 2018</small></p> </div> </div> </div> </div> </div>

.shadow-box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.03); box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.03); } .card-img-top { width: 100%; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .card-body { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem; }