Star Rating Component

Star Rating

Use Bootstrap Icons stars to build a visually rich star-rating display or interactive rater.

Example

<!-- Display only -->
<div class="d-flex text-warning gap-1 fs-5">
  <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
  <i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
  <i class="bi bi-star"></i>
  <small class="text-muted ms-1 fs-6 align-self-center">4.5 (128 reviews)</small>
</div>
<!-- Interactive (CSS-only radio hack) -->
<div class="rating d-flex flex-row-reverse gap-1 fs-3 text-warning">
  <label><input type="radio" name="stars" value="5" class="visually-hidden">
    <i class="bi bi-star-fill"></i></label>
</div>

HTML

Full Editor

Pro Tip

The CSS-only star rating uses flex-row-reverse so hover highlights work with the sibling combinator (~).

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned