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.

Introducing our Bootstrap 4 Star Rating System, an essential UI component for capturing user feedback and enhancing interaction on your website. This star rating system allows users to rate content, products, or services easily and intuitively, providing a visually appealing and user-friendly method for collecting valuable ratings.

Built on the robust Bootstrap 4 framework, our Star Rating System combines functionality with a sleek design that seamlessly fits into any website layout. Perfect for e-commerce sites, review platforms, and content-heavy websites, this component ensures a responsive and engaging user experience.

Key Features:

  • User-Friendly Interface: Simplify rating interactions with a clear and intuitive star-based system, allowing users to quickly and easily submit their ratings.
  • Customizable Appearance: Personalize the star rating system's look using Bootstrap's utility classes, including options for star colors, sizes, spacing, and hover effects, to align with your website's branding.
  • Responsive Design: Guarantee consistent performance across all devices, from desktops to mobile phones, with a star rating system that adapts fluidly to various screen sizes.
  • Easy Integration: Seamlessly integrate the Bootstrap 4 Star Rating System into your website's HTML and CSS, utilizing Bootstrap's pre-built components for fast and efficient implementation.

Enhance your website's user engagement and gather meaningful feedback with our Bootstrap 4 Star Rating System. Whether you’re collecting product reviews, service ratings, or content evaluations, this component offers a reliable and visually appealing way to improve user interaction and overall site experience.

Steps to Copy the Code

Step 1: Copy the Code Snippet

  • Begin by copying the HTML and CSS code snippet provided above. This snippet includes the necessary structure and styles to create a star rating system using Bootstrap 4. Select the code, click the copy button, and paste it into your HTML file where you want the star rating to appear.

Step 2: Link Bootstrap CSS

  • Ensure that Bootstrap's CSS is correctly linked in your HTML document. Add the following <link> tag in the <head> section to import Bootstrap's stylesheet:
  • <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  • This link fetches Bootstrap's CSS file from the official Bootstrap CDN, ensuring your star rating system inherits Bootstrap's styling.

Step 3: Customize and Make it Yours

  • Personalize the star rating system to align with your website's design and rating system requirements. Modify the appearance of the star rating, such as star colors, sizes, and hover effects, by adjusting Bootstrap's CSS classes or adding custom CSS. Customize the functionality of the star rating, such as integrating with backend scripts to store ratings or adding interactive features like animations on hover, to enhance user experience.

By following these steps, you can easily integrate and customize a Bootstrap 4-star rating system, improving user engagement and providing valuable feedback mechanisms on your website. Make the star rating component your own by tailoring it to fit seamlessly with your website's layout and design preferences.

Code Explanation

HTML Code

Container and Row Setup
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
  • <div class="container">: This creates a container for the content, ensuring it is centered and has appropriate padding.
  • <div class="row">: This creates a row within the container to align child elements in a horizontal layout.
  • <div class="col-md-6 offset-md-3">: This defines a column that takes up 6 out of 12 grid columns on medium to larger screens (col-md-6). The offset-md-3 class centers the column by adding a 3-column margin to the left.
Rating System
<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 class="rating d-flex flex-row-reverse justify-content-center">: This div contains the star rating inputs. The d-flex class makes it a flexbox container, flex-row-reverse reverses the order of child elements (to display stars from right to left), and justify-content-center centers the content horizontally.
  • <input type="radio" id="star5" class="d-none" name="rating" value="5">: This creates a hidden radio button (d-none hides it) for the 5-star rating.
  • <label for="star5"></label>: This label is linked to the star5 radio button. In a typical star rating system, CSS would style this label to look like a star. Clicking this label will select the corresponding radio button.
  • The pattern repeats for each of the 4-star, 3-star, 2-star, and 1-star ratings.

CSS Code

Styling the Label
.rating label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin: 0 5px;
}
  • .rating label { ... }: Targets all <label> elements within an element with the class .rating.
  • cursor: pointer;: Changes the cursor to a pointer when hovering over the label, indicating it's clickable.
  • width: 40px;: Sets the width of the label to 40 pixels.
  • height: 40px;: Sets the height of the label to 40 pixels.
  • margin: 0 5px;: Adds a horizontal margin of 5 pixels on both the left and right sides of the label.
Adding the Star Icon
.rating label:before {
  content: '\2605';
  font-size: 2rem;
  color: #ccc;
  transition: color 0.3s;
}
  • .rating label:before { ... }: Targets the :before pseudo-element of all labels within .rating.
  • content: '\2605';: Inserts a Unicode star character (★) before each label.
  • font-size: 2rem;: Sets the font size of the star to 2 rem units (relative to the root element's font size).
  • color: #ccc;: Sets the initial color of the star to a light gray.
  • transition: color 0.3s;: Smoothly transitions the color change over 0.3 seconds when it happens.
Changing the Star Color When Selected
.rating input:checked ~ label:before {
  color: #ffc107;
}
  • .rating input:checked ~ label:before { ... }: Targets the :before pseudo-element of all labels that are siblings following a checked radio input within .rating.
  • color: #ffc107;: Changes the color of the star to a yellow shade (#ffc107) when its corresponding radio input is checked.