→ Tane Mahuta
→ Rating section

Rating section

Rating section fit form for taking user ratings and reviews

This bootstrap css example is contributed by Tane Mahuta, on 17-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Vote

Tags: Rating

Author Tane Mahuta

3.5k

v.5.3

Fork Fullscreen

<div class="modal fade" id="ratingModal" tabindex="-1" aria-labelledby="ratingModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ratingModalLabel">Write a Review</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="rating" class="form-label">Your Rating</label>
            <div class="star-rating">
              <i class="bi bi-star rating-star" data-rating="1"></i>
              <i class="bi bi-star rating-star" data-rating="2"></i>
              <i class="bi bi-star rating-star" data-rating="3"></i>
              <i class="bi bi-star rating-star" data-rating="4"></i>
              <i class="bi bi-star rating-star" data-rating="5"></i>
            </div>
            <input type="hidden" id="rating" name="rating" value="0">
          </div>
          <div class="mb-3">
            <label for="review" class="form-label">Your Review</label>
            <textarea class="form-control" id="review" rows="3" required></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Submit Review</button>
      </div>
    </div>
  </div>
</div>

stars.forEach(star => {
    star.addEventListener('click', function() {
      const rating = this.getAttribute('data-rating');
      ratingInput.value = rating;
      resetStars();
      for (let i = 0; i < rating; i++) {
        stars[i].classList.remove('bi-star');
        stars[i].classList.add('bi-star-fill');
      }
    });
  });

function resetStars() {
    stars.forEach(star => {
      star.classList.remove('bi-star-fill');
      star.classList.add('bi-star');
    });
  }
});
</script>

More Examples

Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

1 year ago

2.6k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Anonymous

8 months ago

1.5k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Mason Ashford

1 year ago

13.2k

v.5.3
Beautiful Rating Component
Take user ratings with this form card

Author:
Mateo Rojas

1 year ago

2k

v.5.3
Star Rating Component

Author:
Alaric Sloane

1 year ago

4.6k

v.5.3
Success modal

Author:
Alaric Sloane

1 year ago

4.7k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

2.9k

v.4.6
Bootstrap Product Card

Author:
Anonymous

1 year ago

4.2k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

1 year ago

2.1k

v.5.3
Audio player with bootstrap

Author:
Arturo

1 year ago

4.1k

v.5.3
Minimal Changelog Page Template design

Author:
Asmath

1 year ago

2.5k

v.5.3
Minimal pricing cards

Author:
Sofia Petrova

1 year ago

1.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent