The Testimonial section with star ratings in Bootstrap serves to showcase client feedback and ratings, enhancing user interaction. It provides a visually appealing carousel format, suitable for business websites, e-commerce platforms, and service-based websites. This project combines Bootstrap’s responsive design capabilities with interactive star ratings, facilitating testimonials and user engagement effectively.
Syntax:
<div id="carouselExampleFade"
class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
...
</div>
Preview:
Output
Approach:
- Firstly, Integrate the Bootstrap via CDN links. The section contains a container with a section header and a carousel for displaying testimonials.
- Each carousel item represents a testimonial with a profile picture, name, star ratings, and content.
- Stars are represented using Unicode character ‘★’ and styled with CSS. Each star has data attributes for testimonial ID and rating.
- It Utilized Bootstrap’s carousel component for navigation between testimonials. Customize control buttons using CSS.
- This JavaScript code adds functionality to the testimonial carousel by allowing users to select star ratings.
- It listens for clicks on the stars, updates the selected rating for each testimonial, and visually highlights the selected stars along with previous stars based on the rating.
-
It does this by toggling the ‘active’ class on the clicked star and previous stars within the same testimonial. The carousel is configured to slide through testimonials using the
carousel-itemclass and control buttons.
Example: Illustartion of Testimonial Section with Star Ratings in Bootstrap.
Javascript
document.addEventListener("DOMContentLoaded", function () {
var stars = document.querySelectorAll('.star');
stars.forEach(function (star) {
star.addEventListener('click', function () {
var testimonialId = this.getAttribute('data-testimonial');
var rating = this.getAttribute('data-rating');
var selectedRating = document
.querySelector('.selectedRating[data-testimonial="' + testimonialId + '"]');
selectedRating.textContent = rating;
// Reset all stars for the testimonial
var testimonialStars = document
.querySelectorAll('.star[data-testimonial="' + testimonialId + '"]');
testimonialStars.forEach(function (s) {
s.classList.remove('active');
});
// Add 'active' class to the clicked star and previous stars
this.classList.add('active');
var previousStars = Array.from(testimonialStars)
.slice(0, parseInt(rating) - 1);
previousStars.forEach(function (s) {
s.classList.add('active');
});
});
});
}); |
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>How to create Testimonial Carousel using Bootstrap5</title>
<link rel="stylesheet" href=
<link href=
rel="stylesheet">
<link href=
"https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
<link rel="stylesheet" href=
<link href=
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="container">
<h1 class="section-header">
Select the Star for Rating
</h1>
<div id="carouselExampleControls"
class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="single-item">
<div class="row">
<div class="col-md-5">
<div class="profile">
<div class="img-area">
<img src=
</div>
<div class="bio">
<h2>GFG 1</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<span class="star" data-testimonial="1"
data-rating="1">★</span>
<span class="star" data-testimonial="1"
data-rating="2">★</span>
<span class="star" data-testimonial="1"
data-rating="3">★</span>
<span class="star" data-testimonial="1"
data-rating="4">★</span>
<span class="star" data-testimonial="1"
data-rating="5">★</span>
</div>
<p class="mt-3">Selected Rating:
<span class="selectedRating" data-testimonial="1">0
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p>
<span>
<i class="fa fa-quote-left"></i>
</span>
Write something about the work
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="single-item">
<div class="row">
<div class="col-md-5">
<div class="profile">
<div class="img-area">
<img src=
</div>
<div class="bio">
<h2>GFG 2</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<span class="star" data-testimonial="2"
data-rating="1">★</span>
<span class="star" data-testimonial="2"
data-rating="2">★</span>
<span class="star" data-testimonial="2"
data-rating="3">★</span>
<span class="star" data-testimonial="2"
data-rating="4">★</span>
<span class="star" data-testimonial="2"
data-rating="5">★</span>
</div>
<p class="mt-3">Selected Rating:
<span class="selectedRating"
data-testimonial="2">
0
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p>
<span>
<i class="fa fa-quote-left"></i>
</span>
Write something about the work
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="single-item">
<div class="row">
<div class="col-md-5">
<div class="profile">
<div class="img-area">
<img src=
</div>
<div class="bio">
<h2>GFG 3</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<span class="star"
data-testimonial="3"
data-rating="1">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="2">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="3">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="4">
★
</span>
<span class="star"
data-testimonial="3"
data-rating="5">
★
</span>
</div>
<p class="mt-3">
Selected Rating:
<span class="selectedRating"
data-testimonial="3">
0
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p>
<span>
<i class="fa fa-quote-left"></i>
</span>
Write something about the work
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
<span class="visually-hidden">
Previous
</span>
</button>
<button class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
<span class="visually-hidden">
Next
</span>
</button>
</div>
</div>
</section>
<script src=
</script>
<script src=
</script>
<script src="script.js"></script>
</body>
</html>
|
CSS
body { background: green;
font-family: montserrat;
}section { display: grid;
place-items: center;
height: 100vh;
}.section-header { position: relative;
padding-bottom: 10px;
text-align: center;
font-weight: 900;
padding-bottom: 25px;
color: #fff;
}.section-header:after { content: '';
height: 3px;
width: 200px;
position: absolute;
bottom: 0;
left: calc(50% - 100px);
background: #fff;
}.section-header span { display: block;
font-size: 15px;
font-weight: 300;
}.testimonials { /* Adjusted max-width for a smaller size */
max-width: 500px;
/* Adjusted padding for a more compact appearance */
padding: 0 15px 20px;
margin: 0 auto 30px auto;
}.single-item { background: #fff;
color: #111;
padding: 15px;
/* Adjusted margin for a more compact appearance */
margin: 30px 15px;
}.profile { /* Adjusted margin for a more compact appearance */
margin-bottom: 15px;
text-align: center;
}.img-area { margin: 0 15px 15px 15px;
}.img-area img { /* Adjusted height for a smaller image */
height: 150px;
/* Adjusted width for a smaller image */
width: 150px;
border-radius: 50%;
border: 5px solid rgb(60, 211, 18);
}.content { /* Adjusted font size for a smaller text */
font-size: 16px;
}.content p { text-align: justify;
}.content p span { /* Adjusted font size for a smaller text */
font-size: 36px;
/* Adjusted margin for a smaller gap */
margin-right: 10px;
color: rgb(20, 218, 33);
}.socials i { /* Adjusted margin for your need */
margin-right: 15px;
}.bio h4 {
font-family: 'Berkshire Swash', cursive;
}.rating-container { text-align: center;
}.star { font-size: 20px;
color: #e1e0dd;
cursor: pointer;
transition: color 0.2s;
}.star:hover,.star.active { color: #ffD700;
}/* styling for carousel control buttons */.carousel-control-prev,.carousel-control-next { color: #fff;
}.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: #11cf21;
}#carouselExampleControls{ width: 700px;
height: 300px;
margin-left: 20rem;
} |
Output:
Output
Recommended Articles