Bootstrap 4 Testimonial Slider Example

Today, We want to share with you bootstrap 4 testimonial slider.In this post we will show you Bootstrap carousel by default is a full-screen slider, that we have changed for build Bootstrap 4 testimonial slider., hear for Bootstrap 4 testimonials slider example is created by using the Bootstrap 4 carousel. we will give you demo and example for implement.In this post, we will learn about bootstrap 4 carousel testimonials slider with an example.

Bootstrap 4 Testimonial Slider Example

Added HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To Create Bootstrap 4 Testimonials 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>
    <!-- Testimonials Carousel Section -->
    <section id="testimonial" class="bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Testimonials 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="Testimonials Carousel"></div>
                                    <h3>oKhatrimaza Movies <br><span>Hindi</span></h3>
                                    <p class="col-md-8 offset-md-2">khatrimaza 2020 Hindi Movies, oKhatrimaza Download Khatrimaza Latest Bollywood Movies Free Download , Khatrimaza Hollywood movies in Hindi or many more.oKhatrimaza is one of the websites you can find to stream Tamil and Bollywood movies most popular for streaming. It is full of the most recent movies released.</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="Testimonials Carousel"></div>
                                    <h3>Khatrimaza 2021 Movies <br><span>Hindi</span></h3>
                                    <p class="col-md-8 offset-md-2">Khatrimaza is a public torrent website. Khatrimaza not only leaks Bollywood movies, Hollywood movies and South movies.Khatrimaza 2021: Find Latest Khatrimaza News, Khatrimaza website movies news and updates on Indian Express.</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="Testimonials Carousel"></div>
                                    <h3>Jio Rockers <br><span>Hindi</span></h3>
                                    <p class="col-md-8 offset-md-2">Jio rockers is an Indian torrent website which allows users to download movies online illegally. Downloading movies from Jio rockers is an act of piracy.Jio Rockers 2021: Find Latest Jio Rockers News, Jio Rockers website movies news and updates on Indian Express.</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 Testimonials 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 bootstrap 4 testimonials slider free download.
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.

Read Also:  sum of two textbox values into third textbox using javascript