NiceSnippets.com
Bootstrap 4 Testimonials or People Review Slider
This is bootstrap 4 carousel testimonials slider. also this slider call people or user review slider. also you can use for display celebrity message. this is fully responsive author thought slider. in this slider we are display image,name or title,status ot tagline and description. also you can use in display logo slider.
We allows to free snippets of bootstrap testimonial slider example , you can download full code of bootstrap testimonial slider free download layout. Here in this post i will give you example of bootstrap testimonial box snippet and you will get simple code of html, css and jquery. In bootstrap carousel slider with people review snippet i give you three tab with html, css and js, you can easily get code of bootstrap testimonial box layout.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body class="bg-info">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 col-10 offset-1 mt-5">
<h2 class="text-center mt-5 mb-5 pb-2 text-uppercase text-dark"><strong>Testimonials</strong></h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner mt-4">
<div class="carousel-item text-center active">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="//nicesnippets.com/demo/profile-1.jpg" alt="First slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Paul Mitchel</strong></h5>
<h6 class="text-dark m-0">Web Developer</h6>
<p class="m-0 pt-3 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p>
</div>
<div class="carousel-item text-center">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="//nicesnippets.com/demo/profile-3.jpg" alt="First slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Steve Fonsi</strong></h5>
<h6 class="text-dark m-0">Web Designer</h6>
<p class="m-0 pt-3 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p>
</div>
<div class="carousel-item text-center">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="//nicesnippets.com/demo/profile-7.jpg" alt="First slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Daniel vebar</strong></h5>
<h6 class="text-dark m-0">Seo Analyst</h6>
<p class="m-0 pt-3 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
body{
font-family: 'Lato', sans-serif;
}
h2{
position: relative;
}
h2::after{
content: "";
width: 130px;
position: absolute;
margin: 0 auto;
height: 3px;
background: #FFC107;
left: 0;
right: 0;
bottom: -10px;
}
.carousel-inner .carousel-item .img-box{
width: 135px;
height: 135px;
}
.carousel-control-prev{
left: -100px;
}
.carousel-control-next{
right: -100px;
}
.carousel-indicators{
top: 320px;
}
@media (min-width: 320px) and (max-width: 640px) {
.carousel-inner .carousel-item p{
font-size: 14px;
}
.carousel-control-prev{
left: -40px;
}
.carousel-control-next{
right: -40px;
}
.carousel-indicators{
top: 400px;
}
}
