2+ Rating Components - Bootstrap

Welcome to our curated collection of Bootstrap rating designs! Ratings are an essential tool for gathering feedback and engaging users on your website. With Bootstrap, creating visually appealing and functional rating systems is simple. In this collection, we've assembled a range of rating templates that are easy to integrate into your website. Whether you're running a product review site, a service-based platform, or any other type of website, our collection has something for you. Let's dive in and discover how Bootstrap ratings can enhance user interaction and improve the overall experience of your website!

Bootstrap 4 Star Rating with Font Awesome Icon

Elevate user feedback on your website by integrating Font Awesome icons into your Bootstrap 4 star rating system. Learn how to create an engaging rating interface for your audience.

Author: Admin

Preview
Code

<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> -->

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <div class="rating d-flex flex-row-reverse justify-content-center">
        <input type="radio" id="star5" class="d-none" name="rating" value="5">
        <label class="h2 text-muted" for="star5"><i class="fas fa-star"></i></label>
        <input type="radio" id="star4" class="d-none" name="rating" value="4">
        <label class="h2 text-muted" for="star4"><i class="fas fa-star"></i></label>
        <input type="radio" id="star3" class="d-none" name="rating" value="3">
        <label class="h2 text-muted" for="star3"><i class="fas fa-star"></i></label>
        <input type="radio" id="star2" class="d-none" name="rating" value="2">
        <label class="h2 text-muted" for="star2"><i class="fas fa-star"></i></label>
        <input type="radio" id="star1" class="d-none" name="rating" value="1">
        <label class="h2 text-muted" for="star1"><i class="fas fa-star"></i></label>
      </div>
    </div>
  </div>
</div>

.rating label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin: 0 5px;
}

.rating label .fa-star {
  transition: color 0.3s;
}

.rating input:checked ~ label .fa-star {
  color: #ffc107;
}

```
No need of JavaScript
```

Bootstrap 4 Star Rating System

Engage your audience and gather valuable feedback with a customizable star rating system built using Bootstrap 4. Learn how to implement and style a user-friendly rating interface for your website.

Author: Admin

Preview
Code

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <div class="rating d-flex flex-row-reverse justify-content-center">
        <input type="radio" id="star5" class="d-none" name="rating" value="5">
        <label for="star5"></label>
        <input type="radio" id="star4" class="d-none" name="rating" value="4">
        <label for="star4"></label>
        <input type="radio" id="star3" class="d-none" name="rating" value="3">
        <label for="star3"></label>
        <input type="radio" id="star2" class="d-none" name="rating" value="2">
        <label for="star2"></label>
        <input type="radio" id="star1" class="d-none" name="rating" value="1">
        <label for="star1"></label>
      </div>
    </div>
  </div>
</div>

.rating label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin: 0 5px;
}

.rating label:before {
  content: '\2605';
  font-size: 2rem;
  color: #ccc;
  transition: color 0.3s;
}

.rating input:checked ~ label:before {
  color: #ffc107;
}

```
No need of JavaScript
```

Bootstrap 4 Simple Star Rating

Enhance user feedback on your website with a straightforward star rating system using Bootstrap 4. Learn how to effortlessly integrate a user-friendly rating interface to gather valuable insights.

Author: Admin

Preview
Code

<div class="container">
  <div class="rating">
    <span class="h1">&#9734;</span>
    <span class="h1">&#9734;</span>
    <span class="h1">&#9734;</span>
    <span class="h1">&#9734;</span>
    <span class="h1">&#9734;</span>
  </div>
</div>

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
  content: "\2605";
  position: absolute;
  color: gold;
}

```
No need of JavaScript
```