Animated Bootstrap 5 Testimonials

Testimonials, feedback, or customer review slider is a dynamic rotating slider through which the valuable reviews or feedback of customers are displayed on a website. It is necessary to enhance credibility and trust to do business in this modern era. Otherwise, it is very difficult to survive in business. In this case, testimonials, feedback, or customer review sliders play the role of savior for a website. Today we will show you how to create an animated responsive testimonial or customer review slider using the Bootstrap 5 framework. The video tutorial below shows the entire process of creating a testimonial slider. We Hope you will watch the full video tutorial.

Video Tutorial:

We Hope you have watched the above video tutorial on testimonials or feedback or customer review slider. Multiple customer reviews can be showcased within a limited space through this special slider. As a result, prospective customers can read various positive and negative comments and decide whether to buy the product or not. A testimonial or client review slider usually includes the customer's comments, name, designation, star ratings, and sometimes a photo of the customer. A testimonial slider acts as social proof for any website. Positive feedback from real customers plays an important role in increasing the trustworthiness of your brand or service. These feedbacks or reviews are displayed to customers in the testimonial slider or customer review slider.

Adding animation to any element of a website adds a different dimension to that website. With this in mind, we have added animate.css to this testimonial slider. That means as each slider moves, its elements like the image and quote icon will also animate. This full-page slider is built with the Bootstrap 5 Responsive framework, making it auto-responsive. However, some slight adjustments have been made via CSS media queries to make it look better on smaller devices. The tutorial above shows in detail how to add the required files to your project and proceed.

You May Aldo like:

Responsive Animated Bootstrap 5 Testimonials [ Source Code ]:

To create Responsive Animated Bootstrap 5 Testimonials with responsive web design concepts, first, we need to add the necessary files like Bootstrap 5 CDN, Font Awesome CDN, and Animate CSS CDN. The entire process is shown in the above video tutorial. After that, copy the source code below and paste it into your HTML and CSS files. If the code is not working properly, you can download the source code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->   
<head>
    <meta charset="UTF-8">
    <title>Animated Bootstrap 5 Testimonial Carousel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">    
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
    
    
    <div class="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="section-header text-center">
                        <h2>Client's Testimonial</h2>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="3000">
      
      <div class="content text-center">
        <div class="icon-area animated zoomIn" style="animation-delay: 1s">
          <i class="fa fa-quote-right"></i>
        </div>
          <div class="img-area animated zoomIn" style="animation-delay: 2s">
              <img src="img/1.jpg" alt="">
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis necessitatibus laborum numquam consequuntur possimus magnam expedita ipsam illum voluptatem quia assumenda placeat, at asperiores vitae obcaecati. Reprehenderit nesciunt voluptatem excepturi, libero ipsum tempora perspiciatis.</p><!-- lorem35 -->          
          <h5>Jasper Kane</h5>
          <h6>Web Developer</h6>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <div class="icon-area animated zoomIn" style="animation-delay: 1s">
          <i class="fa fa-quote-right"></i>
      </div>
      <div class="img-area animated zoomIn" style="animation-delay: 2s">
        <img src="img/2.jpg" alt="">
    </div>
      <div class="content text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis necessitatibus laborum numquam consequuntur possimus magnam expedita ipsam illum voluptatem quia assumenda placeat, at asperiores vitae obcaecati. Reprehenderit nesciunt voluptatem excepturi, libero ipsum tempora perspiciatis.</p>
          
          <h5>Thomas Jones</h5>
          <h6>Graphics Designer</h6>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <div class="icon-area animated zoomIn" style="animation-delay: 1s">
          <i class="fa fa-quote-right"></i>
      </div>
      <div class="img-area animated zoomIn" style="animation-delay: 2s">
        <img src="img/3.jpg" alt="">
    </div>
      <div class="content text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis necessitatibus laborum numquam consequuntur possimus magnam expedita ipsam illum voluptatem quia assumenda placeat, at asperiores vitae obcaecati. Reprehenderit nesciunt voluptatem excepturi, libero ipsum tempora perspiciatis.</p>
          
          <h5>Ethan Miller</h5>
          <h6>UI/UX Designer</h6>
      </div>
    </div>
  </div>
 
</div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ADD CSS:

body {
	background: linear-gradient(to left, #209ef3, #2dbdf0); 
	color: #fff;
}
.wrapper {
	padding: 80px 0;
}
.section-header {
	padding-bottom: 15px;
}
.section-header h2 {
	font-weight: 700;
}
.icon-area {
	text-align: center;
}
.icon-area i {
	font-size: 80px;
	margin-bottom: 20px;
}
.content p {
	width: 60%;
	margin: auto;
}
.img-area {
	width: 100px;
	height: 100px;
	display: block;
	margin: auto;
	overflow: hidden;
	border: 10px inset #fff;
	margin-bottom: 30px;
}
.img-area img {
	width: 100%;
}
.content h5 {
	font-weight: 900;
	margin-top: 15px;
}
.carousel-indicators {
	bottom: -80px;
}
.carousel-indicators [data-bs-target] {
	width: 60px;
	height: 10px;
	background-color: #fff;
}
@media (min-width: 768px) and (max-width: 991px) {
	.content p {
		width: 95%;
	}
}
@media (max-width: 767px) {
	.wrapper {
		padding: 30px 0;
	}
	.content p {
		width: 100%;
	}
	.icon-area i {
		font-size: 50px;
	}
}

It would be wrong to think of a testimonial or customer review or feedback slider as a mere web element. They are essentially trust builders, decision influencers, and engagement magnets for a brand or service. We hope you have collected the source code. Click the Load More button on the homepage to get more such snippets. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Animated Bootstrap 5 Testimonials [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated Bootstrap 5 Testimonials

Video Tutorial:

Responsive Animated Bootstrap 5 Testimonials [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form