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.

Introducing our Bootstrap 4 Star Rating with Font Awesome Icon component, designed to elevate user interaction and feedback on your website. This UI element allows users to rate content, products, or services using visually appealing Font Awesome star icons, providing an intuitive and stylish rating system.

Built on the robust Bootstrap 4 framework, this star-rating component offers a sleek and modern design that integrates seamlessly into any website layout. Perfect for e-commerce platforms, review sites, and content-rich websites, our star rating system ensures a responsive and engaging user experience.

Key Features:

  • Font Awesome Icons: Utilize the popular Font Awesome star icons to create a visually appealing and recognizable rating system, enhancing user interaction.
  • Customizable Styles: Personalize the star rating appearance with Bootstrap's utility classes and Font Awesome's styling options, including colors, sizes, spacing, and hover effects, to match your website's design.
  • Responsive Design: Ensure consistent functionality 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 with Font Awesome Icon component into your website's HTML and CSS, leveraging Bootstrap and Font Awesome for quick and efficient implementation.

Enhance your website's user engagement and collect valuable feedback with our Bootstrap 4 Star Rating with Font Awesome Icon component. Whether you’re gathering product reviews, service ratings, or content evaluations, this stylish and functional star rating system 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 and Font Awesome icons. 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: Link Font Awesome CSS

  • To include Font Awesome icons, add the following <link> tag in the <head> section of your HTML document:
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  • This link fetches Font Awesome's CSS file from the official CDN, enabling the use of star icons in your rating system.

Step 4: Customize and Make it Yours

  • Personalize the star rating system to align with your website's design and rating requirements. Modify the appearance of the star rating, such as star colors, sizes, and hover effects, by adjusting Bootstrap and Font Awesome 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 with Font Awesome icons, 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 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 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 class="h2 text-muted" for="star5"><i class="fas fa-star"></i></label>: This label, linked to the star5 radio button, contains a Font Awesome star icon (<i class="fas fa-star"></i>). The h2 class makes the icon larger, and text-muted sets the initial color to a muted gray.
  • 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 Transition to Star Icons
.rating label .fa-star {
  transition: color 0.3s;
}
  • .rating label .fa-star { ... }: Targets Font Awesome star icons (.fa-star) within the label elements inside .rating.
  • transition: color 0.3s;: Applies a smooth transition effect to the color property of the star icons, making any color change occur gradually over 0.3 seconds.
Changing the Star Color When Selected
.rating input:checked ~ label .fa-star {
  color: #ffc107;
}
  • .rating input:checked ~ label .fa-star { ... }: Targets Font Awesome star icons (.fa-star) within label elements that follow a checked radio input within .rating.
  • color: #ffc107;: Changes the color of the star icons to a yellow shade (#ffc107) when the corresponding radio input is checked.