Bootstrap 5 · Beginner

Interactive Star Rating

A 5-star rating with hover preview and click-to-set.

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="card border-0 shadow-sm" style="max-width:300px"><div class="card-body text-center">
  <h6 class="fw-bold mb-2">Rate us</h6>
  <div class="fs-2" id="srStars" style="cursor:pointer;letter-spacing:4px">
    <span data-v="1">☆</span><span data-v="2">☆</span><span data-v="3">☆</span><span data-v="4">☆</span><span data-v="5">☆</span>
  </div>
  <small class="text-secondary" id="srOut">No rating yet</small>
</div></div>

var stars=document.querySelectorAll('#srStars span'),out=document.getElementById('srOut'),sel=0;
function paint(n){stars.forEach(function(s,i){s.textContent=i<n?'★':'☆';s.style.color=i<n?'#ffc107':''})}
stars.forEach(function(s){s.onmouseenter=function(){paint(+s.dataset.v)};s.onclick=function(){sel=+s.dataset.v;out.textContent='You rated '+sel+'/5'}});
document.getElementById('srStars').onmouseleave=function(){paint(sel)};

Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.