<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"> <a href="#"> <img class="card-img-top" src="https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""> </a> <ul class="list-inline mt-3"> <li class="list-inline-item"><i class="fas fa-user"></i> Metus Vulputate</li> <li class="list-inline-item"><i class="far fa-clock"></i> June 22, 2020</li> </ul> <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="#" 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"> <a href="#"> <img class="card-img-top" src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""> </a> <ul class="list-inline mt-3"> <li class="list-inline-item"><i class="fas fa-user"></i> Metus Vulputate</li> <li class="list-inline-item"><i class="far fa-clock"></i> June 22, 2020</li> </ul> <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="#" 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"> <a href="#"> <img class="card-img-top" src="https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""> </a> <ul class="list-inline mt-3"> <li class="list-inline-item"><i class="fas fa-user"></i> Metus Vulputate</li> <li class="list-inline-item"><i class="far fa-clock"></i> June 22, 2020</li> </ul> <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="#" role="button">Read more...</a> </div> </div> </div> </div> </div>