Bootstrap 5 star ratings built with CSS and HTML — no JavaScript library needed. This page covers 4 rating patterns — display, interactive, breakdown and product reviews.
CSS-Only Interactive Stars
.rating { display: flex; flex-direction: row-reverse; }
.rating input { display: none; }
.rating label { font-size: 2rem; color: #e5e7eb; cursor: pointer; }
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label { color: #f59e0b; }
<div class="rating">
<input type="radio" name="rating" id="r5" value="5">
<label for="r5">★</label>
<!-- r4, r3, r2, r1... -->
</div>
1. Bootstrap 5 Star Rating Display
Read-only star rating in different sizes and colors — for showing scores.
2. Bootstrap 5 Interactive Star Rating
Clickable star rating — hover highlights and click to set a rating.
3. Bootstrap 5 Rating Breakdown
Full rating breakdown with progress bars per star level — like Amazon or App Store reviews.
4. Bootstrap 5 Product Rating Card
Rating component integrated into a product review card — with reviewer info.
Frequently Asked Questions
Bootstrap has no built-in star rating. Use the CSS radio button technique: a flex-direction:row-reverse container with hidden radio inputs and star labels. CSS sibling selectors (input:checked ~ label) apply gold color to all previous stars.
Use Unicode stars ★ (filled) and ☆ (empty) or span elements with color:#f59e0b for filled and color:#e5e7eb for empty. Set pointer-events:none if you want to prevent interaction. No JavaScript needed for display-only ratings.
Use named radio inputs: <input type='radio' name='rating' value='5'>. Read the selected value with: document.querySelector('input[name="rating"]:checked')?.value. Or listen for change events on each input.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.