→ 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

204

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<div class="container mt-5">
  <h2 class="mb-3">Product Rating</h2>
  <div class="card">
    <div class="card-body">
      <div class="row">
        <div class="col-md-4 text-center">
          <h1 class="display-4 mt-3 mb-4">4.8</h1>
          <div class="mb-3">
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-half text-warning"></i>
          </div>
          <h6 class="text-muted">Based on 245 reviews</h6>
        </div>
        <div class="col-md-8">
          <div class="rating-bars">
            <div class="rating-bar mb-3">
              <div class="d-flex justify-content-between align-items-center mb-1">
                <span>5 stars</span>
                <small class="text-muted">70%</small>
              </div>
              <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="rating-bar mb-3">
              <div class="d-flex justify-content-between align-items-center mb-1">
                <span>4 stars</span>
                <small class="text-muted">20%</small>
              </div>
              <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="rating-bar mb-3">
              <div class="d-flex justify-content-between align-items-center mb-1">
                <span>3 stars</span>
                <small class="text-muted">5%</small>
              </div>
              <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="rating-bar mb-3">
              <div class="d-flex justify-content-between align-items-center mb-1">
                <span>2 stars</span>
                <small class="text-muted">3%</small>
              </div>
              <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 3%;" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="rating-bar">
              <div class="d-flex justify-content-between align-items-center mb-1">
                <span>1 star</span>
                <small class="text-muted">2%</small>
              </div>
              <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 2%;" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div class="text-center mt-4">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ratingModal">Write a Review</button>
      </div>
    </div>
  </div>
</div>

<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>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const stars = document.querySelectorAll('.rating-star');
  const ratingInput = document.getElementById('rating');

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

Star Rating Component

Author:
Alaric Sloane

1 month ago

107

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

1 month ago

201

v.5.3
Simple Footer

Author:
Anonymous

7 months ago

252

v.4.6
Bento Grid Layout with Images

Author:
Juan Martinez

3 months ago

348

v.5.3
Simple search bar

Author:
Reza Farhadi

2 months ago

158

v.5.3
Responsive Dashboard Statistics Cards

Author:
Ankit khedkar

2 weeks ago

55

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

1 week ago

42

v.5.3
Stats card made with boostrap 4.6
Minimal admin stats card

Author:
Mishti

4 months ago

287

v.4.6
Feature Cards
showcases three key features with a clean, minimal design.

Author:
Alaric Sloane

1 week ago

37

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

3 months ago

917

v.5.3
Search Bar Examples with Boostrap 5

Author:
Riz Mohammad

3 months ago

225

v.5.3
Bootstrap copyright footer

Author:
Anonymous

3 months ago

250

v.5.3

Didn't find component you were looking for?

Search from 200+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resourses

Free Tailwind CSS Components

© 2024 BootstrapExamples. All Rights Reserved.

v1.2