<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 ----------> <div id="testimonials"> <div class="container _tm-header"> <h1 class="text-center">Client Testimonials</h1> </div> <div class="container"> <div class="row"> <div class="col-12 col-lg-3"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/150/CCCCCC/FFFFFF?Text=Down.com C/O https://placeholder.com/#How_To_Use_Our_Placeholders" alt="Card image cap"> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> <a href="#" class="">Anita Richards</a>, <span class="_tm-user-role">HR Manager</span> </div> </div> </div> <div class="col-12 col-lg-3"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/150/CCCCCC/FFFFFF?Text=Down.com C/O https://placeholder.com/#How_To_Use_Our_Placeholders" alt="Card image cap"> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> <a href="#" class="">Vicky Pundit</a>, <span class="_tm-user-role">Sales Executive</span> </div> </div> </div> <div class="col-12 col-lg-3"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/150/CCCCCC/FFFFFF?Text=Down.com C/O https://placeholder.com/#How_To_Use_Our_Placeholders" alt="Card image cap"> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> <a href="#" class="">Lothar Gomez</a>, <span class="_tm-user-role">Athelete</span> </div> </div> </div> <div class="col-12 col-lg-3"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://via.placeholder.com/150/CCCCCC/FFFFFF?Text=Down.com C/O https://placeholder.com/#How_To_Use_Our_Placeholders" alt="Card image cap"> <div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> <a href="#" class="">Charlie Brown</a>, <span class="_tm-user-role">Factory Owner</span> </div> </div> </div> </div> </div> </div>

#testimonials .card { border: 0; } .card { text-align: center; } .card img { border-radius: 50%; width: 100%; max-width: 9rem; max-height: 9rem; margin: 0 auto; } ._tm-user-role { font-weight: bold; } ._tm-header { padding-bottom: 5rem; padding-top: 5rem; }