Bootstrap testimonial snipp example v23
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>
.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 {
width: auto !important;
display: inline-block;
}
.profile-circel-image-70 img {
width: 70px;
height: 70px;
border-radius: 70px;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row gy-5 align-items-center">
<div class="col-lg-7">
<figure><img class="w-auto" src="https://bootstraplily.com/wp-content/uploads/2021/10/clip-financial-report.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5 mt-5">
<div class="owl-carousel">
<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">“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="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">“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="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">“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="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>
</div>
<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
