"Testimonial"
Bootstrap 4.1.1 Snippet by MPJJ

<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="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <div class="testimonials-wrap"> <div class="container"> <div class="heading-section"> <span class="sub-heading">Testimonials</span> <h2>Happy Clients & Feedbacks</h2> </div> <div class="carousel-testimonial owl-carousel"> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/82.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Mark Huff</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/83.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Rodel Golez</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/84.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Ken Bosh</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/85.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Racky Henderson</p> <span class="position">Father</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/86.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Henry Dee</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/87.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Mark Huff</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/88.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Rodel Golez</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/89.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Ken Bosh</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/90.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Racky Henderson</p> <span class="position">Father</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/91.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Henry Dee</p> <span class="position">Businesswoman</span> </div> </div> </div> <div class="item"> <div class="testimonial-box d-flex"> <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/92.jpg)"> </div> <div class="text pl-4"> <span class="quote"><i class="fa fa-quote-left"></i></span> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="name">Mark Huff</p> <span class="position">Businesswoman</span> </div> </div> </div> </div> </div> </div>
.testimonials-wrap { padding: 40px 0; } .heading-section { text-align: center; } .sub-heading { font-family: 'Lato', sans-serif; font-size: 12px; display: block; font-weight: 600; color: #2e9ca1; text-transform: uppercase; letter-spacing: 2px; } .heading-section h2 { font-size: 28px; font-weight: 600; padding-top: 10px; padding-bottom: 15px; } .testimonial-box { display: block; position: relative; padding: 30px 20px; background: #fff; border: 1px solid rgba(0,0,0,.03); border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, .08); } .user-img { width: 80px; height: 80px; border-radius: 50%; position: relative; min-width: 80px; background-size: 100%; } .carousel-testimonial .item { padding: 30px 10px; } .quote { position: absolute; top: -23px; color: #2e9da1; font-size: 27px; } .name { margin-bottom: 0; line-height: 14px; font-size: 17px; font-weight: 500; } .position { color: #adadad; font-size: 14px; } .carousel-testimonial .owl-nav { text-align: center; } .carousel-testimonial .owl-nav button.owl-next, .carousel-testimonial .owl-nav button.owl-prev { padding: 0 12px !important; } .carousel-testimonial .owl-nav button { outline: none; padding: 0; } .carousel-testimonial .owl-nav button.owl-next span, .carousel-testimonial .owl-nav button.owl-prev span { display: block; font-size: 40px; width: 25px; height: 25px; vertical-align: 0px; line-height: 16px; } .carousel-testimonial .owl-nav button.owl-next.disabled, .carousel-testimonial .owl-nav button.owl-prev.disabled { opacity: 0.5; }
$('.carousel-testimonial').owlCarousel({ loop:true, margin:0, responsiveClass:true, responsive:{ 0:{ items:1, nav:true }, 600:{ items:3, nav:false }, 1000:{ items:3, nav:true, loop:false } } })

Related: See More


Questions / Comments: