Bootstrap testimonial snipp example v24
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-soft-yellow {
background-color: #fff8ef!important;
}
.bg-dot.primary {
background-image: radial-gradient(#3f78e0 2px,transparent 2.5px);
}
.bg-dot {
background-size: .75rem .75rem;
}
.bg-dot, .bg-line {
opacity: .4;
}
.bg-line {
opacity: .4;
}
.w-12 {
width: 3.5rem!important;
}
.w-16 {
width: 6rem!important;
}
.h-16 {
height: 6rem!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;
}
</style>
</head>
<body>
<div class="container py-5">
<h2 class="display-4 mb-3 text-center">Happy Customers</h2>
<p class="lead text-center mb-5 px-lg-0">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
<div class="position-relative">
<div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1" style="bottom: 0.5rem; right: -1.7rem;"></div>
<div class="shape bg-dot primary rellax w-16 h-16" data-rellax-speed="1" style="top: -1rem; left: -1.7rem;"></div>
<div class="carousel owl-carousel gap-small" data-margin="0" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "2"}, "1200":{"items": "3"}}'>
<div class="item">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p class="mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/1.jpg" alt="" />
<div class="info">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!-- /.item -->
<div class="item">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p class="mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" alt="" />
<div class="info">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!-- /.item -->
<div class="item">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p class="mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" alt="" />
<div class="info">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!-- /.item -->
<div class="item">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p class="mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/4.jpg" alt="" />
<div class="info">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!-- /.item -->
<div class="item">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p class="mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" alt="" />
<div class="info">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!-- /.item -->
<div class="item">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p class="mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" alt="" />
<div class="info">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.item-inner -->
</div>
<!-- /.item -->
</div>
<!-- /.owl-carousel -->
</div>
<!-- /.position-relative -->
</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:2
},
1000:{
items:3
}
}
})
</script>
</body>
</html>
jsfiddle example
