Bootstrap 4 Testimonial Slider Example

Today, We want to share with you bootstrap 4 testimonial slider example.In this post we will show you Bootstrap carousel by default is a full-screen slider, hear for If you want to see our other Bootstrap 4 source code and sliders so please click on links. we will give you demo and example for implement.In this post, we will learn about Testimonial Slider with an example.

Bootstrap 4 testimonial carousel slider with autoplay Example

Bootstrap 4 testimonial slider example is created by using the Bootstrap 4 carousel, that we have updated for build Bootstrap 4 testimonial slider.

Add HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To Create Bootstrap 4 Testimonial Slider</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Testimonial Carousel Section -->
    <section id="testimonial" class="bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Testimonial Carousel</h2>
                </div>
                <div class="col-12">
                    <div id="responsiveCarouselSlider" class="carousel slide" data-ride="carousel">
                        <!-- Carousel Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#responsiveCarouselSlider" data-slide-to="0" class="active"></li>
                            <li data-target="#responsiveCarouselSlider" data-slide-to="1"></li>
                            <li data-target="#responsiveCarouselSlider" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <!-- Carousel 1 -->
                            <div class="carousel-item active">
                                <div class="carousel-content">
                                    <div class="profile-img"><img src="/medialibrary/profile-dp-650x650.jpg" alt="Testimonial Carousel"></div>
                                    <h3>TamilRokers New Movies <br><span>Hindi</span></h3>
                                    <p class="col-md-8 offset-md-2">It was established in 2011. Tamilrockers.com is a pirate website that illegally delivers the latest pirated movies in HD. </p>
                                </div>
                            </div>
                            <!-- Carousel 2 -->
                            <div class="carousel-item">
                                <div class="carousel-content">
                                    <div class="profile-img"><img src="/medialibrary/profile-dp-650x650.jpg" alt="Testimonial Carousel"></div>
                                    <h3>Tamil Rockers Movies <br><span>Hindi</span></h3>
                                    <p class="col-md-8 offset-md-2">Tamil Rockers is a torrent website which facilitates the illegal distribution of copyrighted material, including television shows, movies, music and videos. </p>
                                </div>
                            </div>
                            <!-- Carousel 3 -->
                            <div class="carousel-item">
                                <div class="carousel-content">
                                    <div class="profile-img"><img src="/medialibrary/profile-dp-650x650.jpg" alt="Testimonial Carousel"></div>
                                    <h3>tamilrockers new link <br><span>Hindi</span></h3>
                                    <p class="col-md-8 offset-md-2">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>
                            <!-- Carousel pre and next arrow -->
                            <a class="carousel-control-prev text-white" href="#responsiveCarouselSlider" role="button" data-slide="prev">
                            <i class="fas fa-chevron-left"></i>
                            </a>
                            <a class="carousel-control-next text-white" href="#responsiveCarouselSlider" role="button" data-slide="next">
                            <i class="fas fa-chevron-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Testimonial Carousel Section -->
</body>
</html>

Add CSS Code

<style>
    .profile-img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 4px solid #fff;
    margin: 0px auto 20px;
    border-radius: 100%;
}
.carousel-content {
    padding: 50px 0px;
}
.carousel-content h3 span {
    font-size: 17px;
    font-weight: normal;
    color: #e8e8e8;
    text-transform: uppercase;
}
.profile-img img {
    width: 100%;
}
#testimonial {
    text-align: center;
    padding: 40px 0px;
    color: #fff;
}
#testimonial .carousel-control-prev,
#testimonial .carousel-control-next {
    font-size: 36px;
}
#testimonial h2 {
    font-size: 40px;
    font-style: italic;
    border-bottom: 1px solid #7fbdff;
    padding-bottom: 20px;
    display: inline-block;
}
</style>

I hope you get an idea about Responsive Slider.
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.