Testimonial bootstrap snippets free download is a bootstrap snipp, which you can use as a testimonial slider in your web page.
Whole html/css code
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Happy Client Testimonial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
background: #FC5C7D; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Roboto', sans-serif;
letter-spacing: 0.5px;
color: #666;
line-height: 26px;
}
#carousel3d .carousel-3d-slide {
text-align: center;
background-color: #fff;
padding: 10px;
transition: all .4s ease;
border-radius: 4px;
border: 0;
box-shadow: 0 1rem 3rem rgba(0,0,0,0.2) !important;
}
#carousel3d .carousel-3d-slide.current {
border-radius: 6px;
}
.img-circle {
max-width: 100px;
margin: 10px 0px 20px 0px;
border-radius: 50%;
}
.prev[data-v-d8f7eea2] {
color: #fff!important;
left: 15% !important;
}
.next[data-v-d8f7eea2] {
color: #fff!important;
right: 15% !important;
}
.carousel-3d-container[data-v-4ca3afac] {
overflow: unset!important;
}
@media (max-width: 1200px) {
.prev[data-v-d8f7eea2] {
left: 0 !important;
color: #ccc!important;
}
.next[data-v-d8f7eea2] {
right: 0 !important;
color: #ccc!important;
}
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<div class="row">
<div class="col-12">
<h3 class="text-white text-center py-5">Satisfied Clients</h3>
<div id="carousel3d">
<carousel-3d :perspective="0" :space="200" :display="5" :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="true" :autoplay="true" :autoplay-timeout="5000" :height="400">
<slide :index="0">
<div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-andrea-piacquadio-762020%20(1).jpg" alt="">
<h5 class="mb-1 text-success">John Deo</h5>
<p class="mb-3 text-muted small">CEO & Founder</p>
<p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
</div>
</slide>
<slide :index="1">
<div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-tim-savage-736716.jpg" alt="">
<h5 class="mb-1 text-success">John Deo</h5>
<p class="mb-3 text-muted small">CEO & Founder</p>
<p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
</div>
</slide>
<slide :index="2">
<div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-stefan-stefancik-91227.jpg" alt="">
<h5 class="mb-1 text-success">John Deo</h5>
<p class="mb-4 text-muted small">CEO & Founder</p>
<p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
</div>
</slide>
<slide :index="3">
<div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-tim-savage-736716.jpg" alt="">
<h5 class="mb-1 text-success">John Deo</h5>
<p class="mb-3 text-muted small">CEO & Founder</p>
<p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
</div>
</slide>
<slide :index="4">
<div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-andrea-piacquadio-762020%20(1).jpg" alt="">
<h5 class="mb-1 text-success">John Deo</h5>
<p class="mb-3 text-muted small">CEO & Founder</p>
<p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
</div>
</slide>
<slide :index="5">
<div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-tim-savage-736716.jpg" alt="">
<h5 class="mb-1 text-success">John Deo</h5>
<p class="mb-3 text-muted small">CEO & Founder</p>
<p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
</div>
</slide>
<slide :index="6">
<div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-andrea-piacquadio-762020%20(1).jpg" alt="">
<h5 class="mb-1 text-success">John Deo</h5>
<p class="mb-3 text-muted small">CEO & Founder</p>
<p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
</div>
</slide>
</carousel-3d>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js'></script>
<script src='https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js'></script>
<script >new Vue({
el: '#carousel3d',
data: {
slides: 7
},
components: {
'carousel-3d': Carousel3d.Carousel3d,
'slide': Carousel3d.Slide
}
})
</script>
</body>
</html>
jsfiddle example
