Rating

A simple rating component. The size of stars can be set with .fs-x text utilities. The color of stars can be set with .text-x text utilities. The number of stars to highlight is set with the data-value attribute.

<div class="rating fs-xs text-dark" data-value="4">
  <div class="rating-item">
    <i class="fas fa-star"></i>
  </div>
  <div class="rating-item">
    <i class="fas fa-star"></i>
  </div>
  <div class="rating-item">
    <i class="fas fa-star"></i>
  </div>
  <div class="rating-item">
    <i class="fas fa-star"></i>
  </div>
  <div class="rating-item">
    <i class="fas fa-star"></i>
  </div>
</div>
Input

Easily turn a rating component into a form input with the following markup:

<div class="rating-form">

  <!-- Input -->
  <input class="rating-input" type="range" min="1" max="5" value="5">

  <!-- Rating -->
  <div class="rating text-dark" data-value="5">
    <div class="rating-item">
      <i class="fas fa-star"></i>
    </div>
    <div class="rating-item">
      <i class="fas fa-star"></i>
    </div>
    <div class="rating-item">
      <i class="fas fa-star"></i>
    </div>
    <div class="rating-item">
      <i class="fas fa-star"></i>
    </div>
    <div class="rating-item">
      <i class="fas fa-star"></i>
    </div>
  </div>

</div>