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.

Step 2: Bootstrap and Owl Carousel Javascript library

Add the below javascript library in footer section

Step 3: Create the Basic HTML Structure

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

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

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>

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>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</div>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</div>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</div>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

@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>
<gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"><gwmw style="display:none;">

<!doctype html>

<html>

<head>

<title>Responsive Testimonials Example | Free Download</title>

</head>

<body>

<h3>Testimonials Example</h3>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</div>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</div>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</div>

</div>

<h3 class="title">Lorem Ipsum</h3>

<span class="post">Lorem ipsum dolor sit</span>

</p>

</div>

</section>

</body>

</html>

Download Full Source Code of Testimonial slider