Testimonial example in Bootstrap 5 Download

Testimonial Slider Design HTML With Bootstrap

Table of Contents

Testimonial page serves as a platform to show off how your customers say pleasant things about your business brand and how customers have benefited from your product or service, making it a powerful tool for establishing trust and encouraging potential customers to take action.

Testimonial Slider Design HTML With Bootstrap

The Testimonial section is used to show off your customers experience in your website. I used the Bootstrap HTML, Javascript and CSS programming code to create the Testimonial example. I used HTML and Owl Carousel, CSS to design the Testimonial section and also used bootstrap class to make it responsive. It means it fully responsive so you can use any type of devices such as Mobile, Tab, Laptop and any big screen. So you can easily use Testimonial example in your company web page.

Download source code for Bootstrap Team Section Design Download

How to Design a Testimonial Slider?

In this tutorial, I will going to explain step by step How to design a Testimonial Slider using HTML, Javascript, Owl Carousel and CSS. The snippet will allow you to display your customers Testimonials in your company websites. Full source codes and live Testimonial example link available at the end of this tutorial.

Step 1: Bootstrap and Owl Carousel CSS library

Add the below library in your html page in the header section.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

Step 2: Bootstrap and Owl Carousel Javascript library

Add the below javascript library in footer section

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/script.js"></script>

Step 3: Create the Basic HTML Structure

The below code will design the single slide including the image and text.

  <div class="testimonial-bg">
        <div id="testimonial-slider" class="owl-carousel">
          <div class="testimonial">
              <div class="pic">
                  <img src="images/img-1.jpg" alt="">
              </div>
              <div class="testimonial-content">
                  <h3 class="title">Lorem Ipsum</h3>
                  <span class="post">Lorem ipsum dolor sit</span>
                  <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.   
                </p>
              </div>
          </div>
       </div>
     </div>

Repeat the above code for different customers. You can repeat the above code as per your requirements.

<div class="testimonial-bg">
        <div id="testimonial-slider" class="owl-carousel">
          <div class="testimonial">
              <div class="pic">
                  <img src="images/img-1.jpg" alt="">
              </div>
              <div class="testimonial-content">
                  <h3 class="title">Lorem Ipsum</h3>
                  <span class="post">Lorem ipsum dolor sit</span>
                  <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.   
                </p>
              </div>
          </div>
          <div class="testimonial">
              <div class="pic">
                  <img src="images/img-1.jpg" alt="">
              </div>
              <div class="testimonial-content">
                <h3 class="title">Lorem Ipsum</h3>
                  <span class="post">Lorem ipsum dolor sit</span>
                  <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.   
                </p>
              </div>
          </div>
          <div class="testimonial">
            <div class="pic">
                <img src="images/img-1.jpg" alt="">
            </div>
            <div class="testimonial-content">
                <h3 class="title">Lorem Ipsum</h3>
                <span class="post">Lorem ipsum dolor sit</span>
                <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.
                </p>
            </div>
        </div>
        <div class="testimonial">
          <div class="pic">
              <img src="images/img-1.jpg" alt="">
          </div>
          <div class="testimonial-content">
            <h3 class="title">Lorem Ipsum</h3>
              <span class="post">Lorem ipsum dolor sit</span>
              <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.    
            </p>
          </div>
      </div>
      </div>
      </div>

Step 4: Javascript

$(document).ready(function(){
    $('#testimonial-slider').owlCarousel({
        loop:true,
        margin:10,
        responsiveClass:true,
        center:true,
        nav:true,
        autoplayTimeout:3000,
        autoplayHoverPause:true,
        autoplay:true,
        mouseDrag: true,
        navText:[
            "<i class='fa fa-angle-left'></i>",
            "<i class='fa fa-angle-right'></i>"
        ],
        responsive:{
            0:{
                items:1,
            },
            600:{
                items:1,
              
            },
            1000:{
                items:1,
                
            }
        }
    })
});

Step 5: Style CSS

I am used the below CSS to design the Testimonial section.

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

html {
  scroll-behavior: smooth;
}
body {
    font-family: 'Ubuntu', sans-serif;
  background: #fff;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    background: rgb(242 187 9 / 30%) !important;
    color: inherit;
    border: none;
    padding: 0px 15px 5px 15px!important;
    font: inherit;
    color: #002b4b;
    padding: 10px;
}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover {
    background: #f2bb09 !important;
}
.owl-carousel button.owl-dot {
    background: #f2bb09 !important;
}
.owl-dots .owl-dot {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: #ccc !important;
    margin-left: 3px;
    margin-right: 3px;
    outline: none;
}
.owl-dots {
    text-align: center;
}
.owl-dots .owl-dot.active {
    background: #fff !important;
}
/* CSS Document */
.testimonial-bg {
	background: #002b4b;
	padding: 25px;
  }
  #testimonial-slider .testimonial .pic {
	width: 15%;
	padding: 20px 0;
    margin: 0 2% 0 7%;
	float: left;
	position: relative;
	z-index: 1;
  }
  #testimonial-slider .testimonial .pic:before, .testimonial .pic:after {
	content: "";
	width: 100px;
	height: 100px;
	background: #f2bb09;
	position: absolute;
	z-index: -1;
  }
  #testimonial-slider .testimonial .pic:before {
    top: 10px;
    left: -10px;
  }
  #testimonial-slider .testimonial .pic:after {
	bottom: 10px;
	right: -10px;
  }
  #testimonial-slider .testimonial .pic img {
	width: 100%;
	height: auto;
	border: 3px solid #f2bb09;
  }
  #testimonial-slider .testimonial .testimonial-content {
	width: 75%;
	float: right;
  }
  #testimonial-slider .testimonial .title {
	display: block;
    font-size: 25px;
    font-weight: 600;
    color: #f2bb09;
    margin: 0;
    padding-top: 5px;
    padding-left: 15px;
    border: 0px !important;
  }
  #testimonial-slider .testimonial .post {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 27px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 25px;
    padding-left: 16px;
}
  #testimonial-slider .testimonial .description {
    font-size: 15px;
    color: #fff;
    padding: 0 15px;
    margin: 0;
    position: relative;
    text-align: justify;
  }
  #testimonial-slider .testimonial .description:before, #testimonial-slider .testimonial .description:after {
	font-family: "FontAwesome";
	font-weight: 900;
	font-size: 17px;
	color: #f2bb09;
	position: relative;
  }
  #testimonial-slider .testimonial .description:before {
	content: "\f10d";
	margin-right: 5px;
	top: 0;
	left: 0;
  }
  #testimonial-slider .testimonial .description:after {
	content: "\f10e";
	margin-left: 5px;
	position: relative;
	bottom: 0;
	right: 0;
  }
  #testimonial-slider .owl-theme .owl-controls {
	width: 70%;
	margin: 0;
	text-align: left;
	position: absolute;
	bottom: 0;
	right: 0;
  }
  #testimonial-slider .owl-theme .owl-controls .owl-buttons div {
	width: 70px;
	height: 90px;
	line-height: 90px;
	background: transparent;
	border-radius: 0;
	opacity: 1;
	position: relative;
  }
  
  @media only screen and (max-width: 990px) {
	#testimonial-slider .testimonial {
	  text-align: center;
	}
	#testimonial-slider .testimonial .pic {
	  width: 200px;
	  margin: 0 auto;
	  float: none;
	}
	#testimonial-slider .testimonial .pic:before, #testimonial-slider .testimonial .pic:after {
	  width: 80px;
	  height: 100px;
	}
	#testimonial-slider .testimonial .testimonial-content {
	  width: 100%;
	  float: none;
	}
	#testimonial-slider .testimonial .title {
	  padding: 15px 0 0 0;
	}
	#testimonial-slider .testimonial .post {
	  padding: 0;
	  margin-bottom: 10px;
	}
	#testimonial-slider .owl-theme .owl-controls {
	  width: 100%;
	  position: static;
	  text-align: center;
	}
	#testimonial-slider .owl-theme .owl-controls .owl-buttons div {
	  height: 50px;
	  line-height: 50px;
	}
  }
.owl-nav .owl-next{
    position: absolute;
    top:calc(50% - 25px);
    right: 0;
    opacity: 1;
    font-size: 30px !important;
    z-index: 1;
}

.owl-nav .owl-prev{
    position: absolute;
    top:calc(50% - 25px);
    left: 0;
    opacity: 1;
    font-size: 30px !important;
    z-index: 1;
}

How to design Bootstrap Vertical Tab

Full Source Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Testimonials Example | Free Download</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<section id="slider" class="pt-5">
    <div class="mission-area half-bg default-padding-bottom bg-gray ">
        <div class="container margin-40">
       <div class="row margin-top-20 content-p table-d">
      <div class="col-md-12">
        <h3>Testimonials Example</h3>
        <div class="testimonial-bg">
        <div id="testimonial-slider" class="owl-carousel">
          <div class="testimonial">
              <div class="pic">
                  <img src="images/img-1.jpg" alt="">
              </div>
              <div class="testimonial-content">
                  <h3 class="title">Lorem Ipsum</h3>
                  <span class="post">Lorem ipsum dolor sit</span>
                  <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.   
                </p>
              </div>
          </div>
          <div class="testimonial">
              <div class="pic">
                  <img src="images/img-1.jpg" alt="">
              </div>
              <div class="testimonial-content">
                <h3 class="title">Lorem Ipsum</h3>
                  <span class="post">Lorem ipsum dolor sit</span>
                  <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.   
                </p>
              </div>
          </div>
          <div class="testimonial">
            <div class="pic">
                <img src="images/img-1.jpg" alt="">
            </div>
            <div class="testimonial-content">
                <h3 class="title">Lorem Ipsum</h3>
                <span class="post">Lorem ipsum dolor sit</span>
                <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.
                </p>
            </div>
        </div>
        <div class="testimonial">
          <div class="pic">
              <img src="images/img-1.jpg" alt="">
          </div>
          <div class="testimonial-content">
            <h3 class="title">Lorem Ipsum</h3>
              <span class="post">Lorem ipsum dolor sit</span>
              <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non metus felis. Sed ut nisl gravida, egestas justo at, lobortis tortor. Sed varius a libero a aliquet. Fusce sodales nibh elementum vulputate commodo. Nulla laoreet arcu pulvinar, efficitur nunc at, ullamcorper nisi. Vivamus sit amet maximus mi.    
            </p>
          </div>
      </div>
      </div>
      </div>
  </div>
</div>

</div>
</div>
</section>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> 
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/script.js"></script>
</body>
</html>

Download Full Source Code of Testimonial slider