<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"> <!------ Include the above in your HEAD tag ----------> <div class="container mb-4"> <div class="row"> <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 mt-4"> <div class="card shadow"> <div class="card-body text-center"> <div class="img-acuthor-wrap"> <a href="#"> <img class="card-img-top" src="https://wpw3schools.com/wp-content/uploads/2020/08/How-to-Edit-Footer-Copyright-Text-in-any-WordPress-Theme-_.jpg" alt=""> </a> <ul class="list-inline mt-3"> <li class="list-inline-item"><i class="fas fa-user"></i> Wpw3schools</li> <li class="list-inline-item"><i class="far fa-clock"></i> Aug 22, 2020</li> </ul> </div> <hr> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="btn btn-outline-dark my-2" href="https://wpw3schools.com/" role="button">Read more...</a> </div> </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 mt-4"> <div class="card shadow"> <div class="card-body text-center"> <div class="img-acuthor-wrap"> <a href="#"> <img class="card-img-top" src="https://wpw3schools.com/wp-content/uploads/2020/08/how-to-backup-your-wordpress-site-_.jpg" alt=""> </a> <ul class="list-inline mt-3 "> <li class="list-inline-item"><i class="fas fa-user"></i>Wpw3schools</li> <li class="list-inline-item"><i class="far fa-clock"></i> Aug 22, 2020</li> </ul> </div> <hr> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="btn btn-outline-dark my-2" href="https://wpw3schools.com/" role="button">Read more...</a> </div> </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 mt-4"> <div class="card shadow"> <div class="card-body text-center"> <div class="img-acuthor-wrap"> <a href="#"> <img class="card-img-top" src="https://wpw3schools.com/wp-content/uploads/2020/08/html-vs-Wordpress-.jpg" alt=""> </a> <ul class="list-inline mt-3"> <li class="list-inline-item"><i class="fas fa-user"></i>Wpw3schools</li> <li class="list-inline-item"><i class="far fa-clock"></i> Aug 22, 2020</li> </ul> </div> <hr> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="btn btn-outline-dark my-2" href="https://wpw3schools.com/" role="button">Read more...</a> </div> </div> </div> </div> </div>

.img-acuthor-wrap{ position:relative; } .img-acuthor-wrap > ul.list-inline{ position:absolute; bottom:-16px; padding:5px 10px; background-color:#ffffffa1; width:100%; }