Today, We want to share with you bootstrap 4 testimonial slider example.In this post we will show you How to Design a Testimonial Slider?, hear for Spread the Word: Beautiful Testimonial UI Examples we will give you demo and example for implement.In this post, we will learn about Bootstrap Testimonial Slider Free Download with an example.
Awesome CSS Testimonial Slider Examples
This is bootstrap 4 carousel testimonials slider. as well as this slider call people or user review slider. as well as you can use for display celebrity message. this is fully responsive author thought slider. in this bootstrap testimonial slider example free download i am display image dynamic, product name or product title, some status ot best tagline and more description. as well as you can use in display your sponcer logo slider.
We allows to free Tutorials of bootstrap testimonial slider example , you can download full code of bootstrap testimonial slider free download layout.
bootstrap testimonial box tuorials and you will get simple code of html, css and jquery.
Bootstrap 4 Testimonials or People Review Slider
In responsive testimonial slider html with people review tuorials i give you three tab with html code, css code and javascript code, you can simply get code of bootstrap testimonial box layout.
HTML CODE
<!doctype html>
<html lang="en">
<head>
<title>testimonial slider - www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.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="liveSliderCarouselProductWithBanner" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#liveSliderCarouselProductWithBanner" data-slide-to="0" class="active"></li>
<li data-target="#liveSliderCarouselProductWithBanner" data-slide-to="1"></li>
<li data-target="#liveSliderCarouselProductWithBanner" 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/upcomming-movies-2021-1.jpg" alt="TamilRokers findmelink">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Paul Mitchel</strong></h5>
<h6 class="text-dark m-0">TamilRokers findmelink</h6>
<p class="m-0 pt-3 text-white">What is new URL of tamil rockers Many people from all over the world are ... You can also enjoy Tamil movies through tamilrockers new link 2020 free download.</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/upcomming-movies-2021-3.jpg" alt="TamilRokers">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Steve Fonsi</strong></h5>
<h6 class="text-dark m-0">TamilRokers</h6>
<p class="m-0 pt-3 text-white">Dec 2, 2020 — Tamilrockers new link will allow the people to download the HD movies at free of cost without any hassles with fresh regular updates.</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/upcomming-movies-2021-7.jpg" alt="TamilRokers New Link 2021">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Daniel vebar</strong></h5>
<h6 class="text-dark m-0">TamilRokers New Link 2021</h6>
<p class="m-0 pt-3 text-white">Tamilrockers new website links and how to access them easily | tamilrockers · Open Google Chrome or any other browser. · Type this URL proxysite.</p>
</div>
</div>
<a class="carousel-control-prev" href="#liveSliderCarouselProductWithBanner" 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="#liveSliderCarouselProductWithBanner" 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
style.css
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;
}
}
I hope you get an idea about responsive testimonial slider html.
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.