Feedback bootstrap snipp with carousel slider made with bootstrap framework, you can use this in middle of your webpage, simple div structure easy to implement.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
<title>client feedback bootstrap snipp</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
.icon-circle{
background-color:#fff;
transition:all 0.3s ease;
width:50px;
margin:0 5px;
height:50px;
border-radius:50px;
font-size:15px;
border:1px solid #ddd;
cursor:pointer;
}
.icon-circle:hover{
box-shadow:0px 0px 5px 8px rgba(0,0,0,0.05);
}
.icon-circle:hover i{
color:rgba(0,0,0,0.9);
}
.icon-circle a i{
color:#ccc;
}
.owl-carousel .owl-item img {
width:auto !important;
display:inline-block;
}
.profile-circel-image-70 img {
width: 70px;
height: 70px;
border-radius: 70px;
}
</style>
<div class="container pt-5">
<div class="row pt-5 pb-3">
<div class="col-12 text-center">
<h2 class="font-weight-bold pb-1">What People Say</h2>
<p class="m-0 text-black-50">Lost the plot cracking goal give us a bell is bog horse.</p>
</div>
</div>
<div class="row owl-carousel owl-theme">
<div class="col-12 my-5">
<div class="p-4 border-light border rounded cc text-center">
<p class="mb-4 lead text-muted">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam, ante vitae semper pulvinar, ipsum tellus sodales lectus, quis gravida dolor ligula sit amet turpis."</p>
<div class="profile-circel-image-70 mb-3 text-center"><img class="mr-3" src="img/3.jpg" alt=""></div>
<div class="media-body">
<h6 class="m-0">Kevin Rich</h6>
<p class="text-muted m-0 small">Social Media Manager</p>
</div>
</div>
</div>
<div class="col-12 my-5">
<div class="p-4 border-light border rounded cc text-center">
<p class="mb-4 lead text-muted">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam, ante vitae semper pulvinar, ipsum tellus sodales lectus, quis gravida dolor ligula sit amet turpis."</p>
<div class="profile-circel-image-70 mb-3"><img class="mr-3" src="img/2.jpg" alt=""></div>
<div class="media-body">
<h6 class="m-0">Jenifer Hanton</h6>
<p class="text-muted m-0 small">Web Developer</p>
</div>
</div>
</div>
<div class="col-12 my-5">
<div class="p-4 border-light border rounded cc text-center">
<p class="mb-4 lead text-muted">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam, ante vitae semper pulvinar, ipsum tellus sodales lectus, quis gravida dolor ligula sit amet turpis."</p>
<div class="profile-circel-image-70 mb-3"><img class="mr-3 img-fluid" src="img/1.jpg" alt=""></div>
<div class="media-body">
<h6 class="m-0">Jenifer Hanton</h6>
<p class="text-muted m-0 small">Web Developer</p>
</div>
</div>
</div>
<div class="col-12 my-5">
<div class="p-4 border-light border rounded cc text-center">
<p class="mb-4 lead text-muted">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam, ante vitae semper pulvinar, ipsum tellus sodales lectus, quis gravida dolor ligula sit amet turpis."</p>
<div class="profile-circel-image-70 mb-3"><img class="mr-3 img-fluid" src="img/4.jpg" alt=""></div>
<div class="media-body">
<h6 class="m-0">Jenifer Hanton</h6>
<p class="text-muted m-0 small">Web Developer</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.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:10,
nav:false,
dots:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
