Bootstrap testimonial snipp example v30
Whole html/css code
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"> <title>Testimonial snipp</title> <style> .card{ border-radius: 0.4rem; } .blockquote-details .info { padding-left: 1rem; } .blockquote-details { display: flex; align-items: center; text-align: left; } .item-inner { padding: 1rem .75rem; } blockquote.icon { position: relative; border: 0; padding: 0; } blockquote.icon:before { content: "201d"; position: absolute; top: -1.5rem; color: rgba(52,63,82,.05); font-size: 10rem; line-height: 1; z-index: 1; } .owl-carousel.gap-small .owl-dots { margin-top: 1rem; } .owl-carousel .owl-dots { text-align: center; } .owl-carousel .owl-dots .owl-dot.active span { transform: scale(1); background: 0 0; border-color: #fff; } .owl-carousel .owl-dots .owl-dot span { width: .7rem; height: .7rem; margin: 0 .3rem; background: #fff; opacity: .5; display: block; -webkit-backface-visibility: visible; transition: all .2s ease-in-out; border-radius: 100%; transform: scale(.6); border: 3px solid transparent; } .owl-carousel .owl-item img { display: inline-block; } .w-12 { width: 3.5rem!important; } .image-wrapper.bg-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll!important; } .image-wrapper.bg-full { background-size: 100%; background-position: center center; background-repeat: no-repeat; background-attachment: scroll!important; } .image-wrapper:not(.mobile) { background-attachment: fixed!important; } .card[class*=bg-] { box-shadow: none!important; } .image-wrapper { background: no-repeat center center; background-size: cover; position: relative; z-index: 0; } .ratings { display: inline-block; position: relative; width: 5rem; height: 0.8rem; } .ratings:after { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; font-weight: 400; font-size: .9rem; line-height: 1; position: absolute; top: 0; left: 0; color: #fcc032; content: "26052605260526052605"; overflow: hidden; } </style> </head> <body> <div class="container py-5"> <div class="row text-white text-center"> <div class="col-xl-10 mx-auto mb-5"> <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400" style="background-image:url(https://images.pexels.com/photos/2371901/pexels-photo-2371901.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"> <div class="card-body p-5"> <div class="row"> <div class="col-xxl-9 mx-auto"> <div class="owl-carousel dots-dark gap-small mb-0" data-margin="30"> <div class="item"> <span class="ratings five mb-3"></span> <blockquote class="border-0 fs-lg mb-2"> <p class="lead mb-4">“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p> <div class="blockquote-details justify-content-center text-center"> <div class="info ps-0"> <h5 class="mb-1 text-white">Coriss Ambady</h5> <p class="mb-0">Financial Analyst</p> </div> </div> </blockquote> </div> <!-- /.item --> <div class="item"> <span class="ratings five mb-3"></span> <blockquote class="border-0 fs-lg mb-2"> <p class="lead mb-4">“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p> <div class="blockquote-details justify-content-center text-center"> <div class="info ps-0"> <h5 class="mb-1 text-white">Cory Zamora</h5> <p class="mb-0">Marketing Specialist</p> </div> </div> </blockquote> </div> <!-- /.item --> <div class="item"> <span class="ratings five mb-3"></span> <blockquote class="border-0 fs-lg mb-2"> <p class="lead mb-4">“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p> <div class="blockquote-details justify-content-center text-center"> <div class="info ps-0"> <h5 class="mb-1 text-white">Nikolas Brooten</h5> <p class="mb-0">Sales Manager</p> </div> </div> </blockquote> </div> <!-- /.item --> </div> <!-- /.owl-carousel --> </div> <!-- /column --> </div> <!-- /.row --> </div> <!--/.card-body --> </div> <!--/.card --> </div> <!-- /column --> </div> <!-- /.row --> </div> <!-- /.container --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> <script> $('.owl-carousel').owlCarousel({ loop:true, margin:20, nav:false, dots:true, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:1 } } }) </script> </body> </html>
jsfiddle example