Post Date: December 16, 2018
Last Updated: October 05, 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 customers have in you and your business offerings.
Testimonials are a valuable tool for attracting the attention of prospective clients and existing customers. They can help build confidence in your services and ultimately contribute to the success of your business. Pasted text
Testimonial Section Using Bootstrap and CSS
A testimonial section can be designed using HTML, CSS, and Bootstrap. Bootstrap provides useful components that make it easier to create responsive and interactive website sections.
When working with Bootstrap, it is important to make sure that the Bootstrap classes used in your code match the version of Bootstrap imported into your project. For example, using Bootstrap 4 classes while importing Bootstrap 3 can result in unexpected behavior or styling issues. Pasted text
The code in this example is developed using Bootstrap 3 and includes star ratings for customer reviews. You can replace the sample reviews and customer names with your company’s truthful customer feedback and names. Pasted text
The carousel technique is used to create an automatic slideshow, while CSS is used to style the testimonial section and sliding indicators. A background image is also added to make the testimonial section more visually appealing. Pasted text
We have created the following sample code for the testimonial section. You can copy the code and modify it according to your application’s requirements. Pasted text
HTML and CSS Code
<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>
<!-- Additional testimonial slides can be added here -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The original article contains additional testimonial slides following the same structure, including customer reviews, names, star ratings, carousel indicators, and Bootstrap columns. Keep those existing sections as they are in your current article rather than replacing them. Pasted text
How the Testimonial Carousel Works
The testimonial section uses several Bootstrap and CSS features:
- Bootstrap container: Keeps the testimonial content organized within a responsive layout.
- Bootstrap carousel: Displays multiple testimonials as slides.
- Carousel indicators: Allow visitors to identify and navigate between slides.
- Star ratings: Font Awesome icons are used to display customer ratings.
- Background image: The testimonial section uses a background image with a dark overlay.
- CSS styling: Custom CSS controls the spacing, colors, indicators, typography, and overall appearance.
The original implementation uses Bootstrap 3.3.7, jQuery, Font Awesome, and Google Fonts. Pasted text
Important Bootstrap Version Note
This example was originally developed using Bootstrap 3. Make sure you use the same Bootstrap version as the classes and JavaScript used in the code.
If you are maintaining an existing Bootstrap 3 application, this implementation can be retained. For a new project, consider using a currently supported Bootstrap version and update the syntax accordingly.
Result
The result is a colorful testimonial section that can attract visitors’ attention and provide a visually engaging way to display customer feedback. Pasted text
You can customize the background image, customer reviews, names, star ratings, colors, and carousel settings according to your application’s requirements.
In the above example, the effective usage of Bootstrap, carousel techniques, CSS, and HTML is explained clearly. You can modify the script according to your application and make use of it. Pasted text
Official Bootstrap Documentation
For additional information about Bootstrap’s carousel component, refer to the official Bootstrap documentation:
Bootstrap Carousel Documentation
Conclusion
Using Bootstrap, CSS, and HTML, you can create an attractive testimonial section with a carousel, customer reviews, star ratings, and a background image.
The example above can be customized according to your website design and application requirements.
FAQs
1. What is a Bootstrap testimonial carousel?
A Bootstrap testimonial carousel is a slideshow component used to display multiple customer testimonials within a website section.
2. Can I customize the testimonial design?
Yes. You can customize the background image, colors, fonts, spacing, star ratings, and other CSS properties according to your website design.
3. Can I add more customer testimonials?
Yes. You can add additional carousel items using the same HTML structure used in the existing testimonial slides.
Related Articles
Talk to Our Experts
Need help creating responsive web interfaces or integrating Bootstrap components into your website? Our experts can help you build reliable and user-friendly web solutions.
Get in touch with us: Contact our team