Responsive testimonial slider bootstrap is a bootstrap snipp which you can use as a testimonial slider in your website.
Whole html/css code
<!DOCTYPE html> <html> <head> <title>Bootstrap Client Testimonial 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); body { background: #1f4037; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #1f4037, ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #1f4037, #99f2c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: 'Roboto', sans-serif; letter-spacing: 0.5px; } .card { border: 0; margin: 1px; outline: none; cursor: pointer; } .card img { transition: all 0.3s ease; } .card:hover img { filter: grayscale(100%); } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2 class="text-center py-5 text-white">Satisfied Clients</h2> <div class="items"> <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/2765557/pexels-photo-2765557.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="card-body"> <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <h5 class="mb-0 text-success">John Deo</h5> <p class="mb-0 text-muted">CEO & Founder</p> </div> </div> <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/3996756/pexels-photo-3996756.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="card-body"> <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <h5 class="mb-0 text-success">John Deo</h5> <p class="mb-0 text-muted">CEO & Founder</p> </div> </div> <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/428328/pexels-photo-428328.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="card-body"> <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <h5 class="mb-0 text-success">John Deo</h5> <p class="mb-0 text-muted">CEO & Founder</p> </div> </div> <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/3279570/pexels-photo-3279570.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="card-body"> <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <h5 class="mb-0 text-success">John Deo</h5> <p class="mb-0 text-muted">CEO & Founder</p> </div> </div> <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="card-body"> <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <h5 class="mb-0 text-success">John Deo</h5> <p class="mb-0 text-muted">CEO & Founder</p> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.items').slick({ dots: true, infinite: true, speed: 800, slidesToShow: 3, slidesToScroll: 3, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 2, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); }); </script> </body> </html>
jsfiddle example