Post Date: January 24, 2019
Last Updated: October 07, 2026
What is a testimonial?
Testimonials are written or recorded statements that support your credibility and demonstrate your level of expertise. They also strengthen your reputation by expressing the trust that other people have in you and your business offerings.
Testimonials are a valuable tool for attracting deeper interest from prospective and existing clients. When presented effectively, genuine customer feedback can help build trust and contribute to the success of your business.
Testimonial Section Using Bootstrap and CSS
A testimonial section can be designed using HTML, CSS, and Bootstrap to display customer feedback in an attractive and interactive format.
When working with Bootstrap, it is important to make sure that the Bootstrap version used by your HTML classes matches the Bootstrap CSS and JavaScript files included in the project. Using classes from one Bootstrap version while importing another version can result in unexpected styling or functionality issues. The original implementation of this article was developed using Bootstrap 3.
This example uses star ratings to visually represent customer feedback. You can replace the sample reviews and customer names with your company’s genuine customer testimonials.
The Bootstrap carousel technique is used to create an automatic slideshow, while CSS is used to customize the appearance of the testimonial section and its navigation indicators. A background image is also added to make the testimonial section more visually appealing.
Note: The code below is the original Bootstrap 3 implementation. The Bootstrap version and existing approach have been retained so that the original tutorial remains consistent.
Bootstrap Testimonial Carousel Code
We have attached a testimonial carousel code example that you can customize according to your requirements. You can replace the sample customer names, reviews, ratings, and background image with your own content.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Testimonial Carousel with Quote Icon</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.background-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("testimonials2.JPEG");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding:25px;
margin:0px;
margin-bottom:60px;
}
.star {
color:orange;
}
.carousel {
margin: 2px auto;
padding: 0 0px;
}
.carousel .item {
color: white;
overflow: hidden;
min-height: 120px;
font-size: 14px;
}
.carousel .testimonial {
padding: 0 0px 0 0px;
position: relative;
}
.carousel .overview b {
text-transform: uppercase;
color:Deepskyblue;
}
.carousel .carousel-indicators {
bottom: -25px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 14px;
height: 14px;
border-radius: 50%;
margin: 1px 3px;
}
.carousel-indicators li {
background: #e2e2e2;
border: 4px solid #fff;
}
.carousel-indicators li.active {
color: #fff;
background:Deepskyblue;
border: 5px double;
}
</style>
</head>
<body>
<div class="background-image">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4><i><span style="color:white">What our clients are saying about us ! </span></i></h4>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item carousel-item active">
<div class="row">
<div class="col-sm-6">
<div class="media">
<div class="media-body">
<div class="testimonial">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<p>Good customer service and a lot of patience towards their customers. 5 stars all the way. Thank you.</p>
<p class="overview"><b>xyz</b></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media">
<div class="media-body">
<div class="testimonial">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star "></span>
<p>Fixed within an hour, cracking work and price thank you. Saved me time and money</p>
<p class="overview"><b>xyz1</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-6">
<div class="media">
<div class="media-body">
<div class="testimonial">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<p>Good customer service and a lot of patience towards their customers. 5 stars all the way. Thank you.</p>
<p class="overview"><b>ABC</b></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media">
<div class="media-body">
<div class="testimonial">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<p>Fixed within an hour, cracking work and price thank you. Saved me time and money</p>
<p class="overview"><b>ABC</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-6">
<div class="media">
<div class="media-body">
<div class="testimonial">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star "></span>
<p>Good customer service and a lot of patience towards their customers. 5 stars all the way. Thank you.</p>
<p class="overview"><b>ABCXYZ</b></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media">
<div class="media-body">
<div class="testimonial">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<span class="fa fa-star star"></span>
<p>Fixed within an hour, cracking work and price thank you. Saved me time and money</p>
<p class="overview"><b>ABCXYZ1</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The original implementation includes the Bootstrap 3.3.7 stylesheet and JavaScript, jQuery 1.12.4, Font Awesome, custom CSS for the testimonial background, star ratings, carousel indicators, and multiple testimonial items.
How the Code Works
1. Bootstrap Carousel
The carousel and carousel-inner classes are used to create the slideshow structure. The data-ride="carousel" attribute allows the carousel to start automatically.
2. Carousel Indicators
The following elements provide navigation indicators for the testimonial slides:
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
3. Star Ratings
Font Awesome star icons are used to display customer ratings:
<span class="fa fa-star star"></span>
The .star CSS class controls the appearance of the rating stars.
4. Customer Reviews
Each testimonial contains the review text and customer name:
<p>Good customer service and a lot of patience towards their customers. 5 stars all the way. Thank you.</p> <p class="overview"><b>xyz</b></p>
You can replace these sample values with your actual customer feedback.
5. Background Image
The .background-image class adds a background image and a dark overlay using a CSS linear gradient. This helps improve the visual appearance and readability of the testimonial section.
Results and End Output
The result is a colorful testimonial section designed to attract the attention of website visitors. The carousel displays customer reviews with star ratings and automatically moves between testimonial slides.
The example demonstrates the effective use of Bootstrap, carousel techniques, CSS, and HTML to create a testimonial section. You can modify the existing code according to your application’s requirements and customize the reviews, customer names, colours, and background image.
Important Note About the Original Bootstrap Version
This tutorial was originally published in 2018 and uses Bootstrap 3.3.7, jQuery 1.12.4, and Font Awesome 4.7.0. These are legacy versions, so they should be treated as part of the original tutorial rather than as a recommendation for a new production project.
If you are maintaining an existing Bootstrap 3 application, keeping the versions consistent is important. For a new application, use a currently supported frontend stack rather than copying the legacy dependencies unchanged.
Bootstrap 3 Carousel Documentation
Frequently Asked Questions
1. What is a Bootstrap testimonial carousel?
A Bootstrap testimonial carousel is a component that displays multiple customer reviews as a slideshow. It allows several testimonials to be presented within a limited amount of webpage space.
2. Can I change the customer reviews in this example?
Yes. Replace the sample testimonial text and customer names with your company’s genuine customer reviews. The original article specifically recommends adding truthful reviews and customer names. Pasted text
3. Can I change the background image?
Yes. The background image is defined in the .background-image CSS class:
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("testimonials2.JPEG");
You can replace testimonials2.JPEG with the path or URL of your own image.
4. Why is the Bootstrap version important?
Bootstrap classes and components can differ between versions. This example was developed using Bootstrap 3, so the corresponding Bootstrap 3 CSS and JavaScript files are included. Mixing classes from different Bootstrap versions can cause styling or functionality issues.
5. Can I add more testimonials?
Yes. You can add additional .item sections inside .carousel-inner and add corresponding carousel indicators if required.
Conclusion
A well-designed testimonial section can make customer feedback more visible and help communicate trust to website visitors. In this example, HTML, CSS, Bootstrap carousel functionality, Font Awesome star icons, and a background image are combined to create an attractive testimonial section.
You can use the existing code as a starting point and customize it according to your application’s design and requirements.
Related Articles
Talk to Our Experts
Need help with frontend development, Bootstrap integration, or implementing a customised testimonial section? Our experts can help you find the right solution for your business.
Get in touch with us: Contact our team