Bootstrap testimonial snipp example v25
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://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"> <title>Testimonial snipp</title> <style> .card { box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%); border: 1px solid rgba(164,174,198,.2); border-radius: .4rem; } .card-body { flex: 1 1 auto; padding: 2rem 2rem; } .rounded img { border-radius: .4rem; } figure img { width: 100%; max-width: 100%; height: auto!important; } .shape.rellax { z-index: 1; } .shape.rellax { position: absolute; } .bg-dot.primary { background-image: radial-gradient(#3f78e0 2px,transparent 2.5px); } .shape.rellax { z-index: 1; } .bg-dot { background-size: .75rem .75rem; } .bg-dot, .bg-line { opacity: .4; } .h-18 { height: 8rem!important; } .w-18 { width: 8rem!important; } figure img { width: 100%; max-width: 100%; height: auto!important; } .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; left: -.9rem; 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; -webkit-tap-highlight-color: transparent; position: absolute; left: 0; width: 100%; display: flex; flex-direction: row; justify-content: center; margin-top: 2rem; line-height: 1; } .owl-carousel .owl-dots .owl-dot.active span { transform: scale(1); background: 0 0; border-color: #aab0bc; } .owl-carousel .owl-dots .owl-dot span { width: .7rem; height: .7rem; margin: 0 .3rem; background: #aab0bc; 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; } .counter-wrapper .counter { font-size: 2rem; } .counter-wrapper .counter { font-size: calc(1.325rem + .9vw); letter-spacing: normal; line-height: 1; margin-bottom: .5rem; } .owl-carousel .owl-item img { width: auto !important; display: inline-block !important; } .profile-circel-image-70 img { width: 70px; height: 70px; border-radius: 70px; } </style> </head> <body> <div class="container py-5 my-5"> <div class="row gy-5 align-items-center"> <div class="col-lg-7 position-relative"> <div class="shape bg-dot primary rellax w-18 h-18" data-rellax-speed="1" style="top: -49px; left: -1.4rem; z-index: 0;"></div> <div class="row gx-md-5 gy-5"> <div class="col-md-6"> <figure class="rounded mt-md-10 position-relative"><img src="https://bootstraplily.com/wp-content/uploads/2021/10/g5.jpg" alt=""></figure> </div> <!--/column --> <div class="col-md-6"> <div class="row gx-md-5 gy-5"> <div class="col-md-12 order-md-2"> <figure class="rounded"><img src="https://bootstraplily.com/wp-content/uploads/2021/10/g6.jpg" alt=""></figure> </div> <!--/column --> <div class="col-md-10"> <div class="card alert-primary text-center"> <div class="card-body py-11 counter-wrapper"> <h3 class="counter text-nowrap">5000+</h3> <p class="mb-0">Satisfied Customers</p> </div> <!--/.card-body --> </div> <!--/.card --> </div> <!--/column --> </div> <!--/.row --> </div> <!--/column --> </div> <!--/.row --> </div> <!--/column --> <div class="col-lg-5 mt-5"> <div class="basic-slider owl-carousel gap-small" data-margin="30"> <div class="item"> <blockquote class="icon icon-top fs-lg text-center"> <div class="profile-circel-image-70 mb-3 text-center"><img class="mr-3" src="https://bootstraplily.com/demo/multipurpose/images/1.jpg" alt=""></div> <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor 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">Coriss Ambady</h5> <p class="mb-0">Financial Analyst</p> </div> </div> </blockquote> </div> <!-- /.item --> <div class="item"> <blockquote class="icon icon-top fs-lg text-center"> <div class="profile-circel-image-70 mb-3 text-center"><img class="mr-3" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" alt=""></div> <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor 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">Cory Zamora</h5> <p class="mb-0">Marketing Specialist</p> </div> </div> </blockquote> </div> <!-- /.item --> <div class="item"> <blockquote class="icon icon-top fs-lg text-center"> <div class="profile-circel-image-70 mb-3 text-center"><img class="mr-3" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" alt=""></div> <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor 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">Nikolas Brooten</h5> <p class="mb-0">Sales Manager</p> </div> </div> </blockquote> </div> <!-- /.item --> </div> <!-- /.owl-carousel --> </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