How to create a Testimonial Section with Star Ratings in Bootstrap ?
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:
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-item
class 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 = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" > < link href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel = "stylesheet" > < link href = "https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel = "stylesheet" > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" 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 = "https://media.w3wiki.net/gfg-gg-logo.svg" alt = "" > </ 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 = "https://media.w3wiki.net/gfg-gg-logo.svg" alt = "" > </ 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 = "https://media.w3wiki.net/gfg-gg-logo.svg" alt = "" > </ 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 = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" > </ script > < script src = "script.js" ></ script > </ body > </ html > |
CSS
body { background : green ; font-family : montserrat; } section { display : grid; place-items: center ; height : 100 vh; } .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 h 4 { font-family : 'Berkshire Swash' , cursive ; } .rating-container { text-align : center ; } .star { font-size : 20px ; color : #e1e0dd ; cursor : pointer ; transition: color 0.2 s; } .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 : 20 rem; } |
Output:
Contact Us