This is simply and easy way to all about of the bootstrap 4 carousel testimonials slider. as well as this slider other devloper or user review slider. as well as you can use for display all the author or great people or any celebrity message. this is fully responsive author thought slider. in this slider we are display image, Caption name or title, status or Best tagline bootstrap product slider, and Good description with news slider bootstrap. as well as you can use in display logo slider.
bootstrap 4 testimonial slider example
We support to free Easy way to Implements of bootstrap testimonial slider example , you can free download full source code of bootstrap testimonial slider free download HTML CSS layout. Here in this post We will give you example of bootstrap testimonial box Article with you will get simple all the HTML CSS Source code of All about Slider, css and jquery.
In bootstrap carousel slider with all the clients review slider Article We give you 3 Steps with html source code, css code and JavaScript code, you can easily get this all the source code of bootstrap testimonial box layout.
Bootstrap 4 Testimonials or People Review Slider
HTML Code
<!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="bootstrap4testimonialslider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#bootstrap4testimonialslider" data-slide-to="0" class="active"></li>
<li data-target="#bootstrap4testimonialslider" data-slide-to="1"></li>
<li data-target="#bootstrap4testimonialslider" 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="https://www.pakainfo.com/demo/profile-1.jpg" alt="First slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Hitesh Lathiya</strong></h5>
<h6 class="text-dark m-0">Web Developer</h6>
<p class="m-0 pt-3 text-white">PakaInfo was founded in January 2018 with the aim of sharing a place for General Information languages articles,tutorials and related Information in an easy and simplified way that helps our General Information community including Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature to get basic ideas, learning and understandings.</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="https://www.pakainfo.com/demo/profile-3.jpg" alt="First slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Pansuriya Amit</strong></h5>
<h6 class="text-dark m-0">Web Designer</h6>
<p class="m-0 pt-3 text-white">This blog offers wide range of General Information topics including Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature much more.</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="https://www.pakainfo.com/demo/profile-7.jpg" alt="First slide">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Jaydeep Gondaliya</strong></h5>
<h6 class="text-dark m-0">Seo Analyst</h6>
<p class="m-0 pt-3 text-white">Welcome to PakaInfo – a blog where you will learn about General Information, Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature.In other words, it is a community of software engineers and developers.</p>
</div>
</div>
<a class="carousel-control-prev" href="#bootstrap4testimonialslider" 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="#bootstrap4testimonialslider" 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>
CSS Code
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;
}
}
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Responsive Bootstrap 4 testimonial slider example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.