Rating

Bootstrap 5-Star Rating

Bootstrap 5-star rating plugin can be used to allow the users to share their opinion about the product, documentation page, photo and more.

To use rating you need to include JavaScript code. You can find it in addons in the JS folder.

Simply initiate rating on object with $().mdbRate(); and all needed components will get created.

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Basic Example

Simple 5 star rating.

Edit in sandbox 
        
            

        <div class="container">
          <span id="rateMe1"></span>
        </div>
        
        <!-- rating.js file -->
        <script src="js/addons/rating.js"></script>

      
        
    
        
            

        // Rating Initialization
        $(document).ready(function() {
          $('#rateMe1').mdbRate();
        });

Empty five stars

5 empty stars rating with filling colour on hover.

Edit in sandbox 
        
            

        <div class="container">
          <span id="rateMe2"  class="empty-stars"></span>
        </div>
      
        <!-- rating.js file -->
        <script src="js/addons/rating.js"></script>

      
        
    
        
            

        // Rating Initialization
        $(document).ready(function() {
          $('#rateMe2').mdbRate();
        });

Faces Rating

5 faces that changes mood on hover

Edit in sandbox 
        
            

        <div class="container">
          <span id="rateMe3"  class="rating-faces"></span>
        </div>      
      
        <!-- rating.js file -->
        <script src="js/addons/rating.js"></script>

      
        
    
        
            

        // Rating Initialization
        $(document).ready(function() {
          $('#rateMe3').mdbRate();
        });

Rating with feedback

Adding class feedback to the object of initiation of mdbRate will create popover on click.

You can pick one of 3 styles above by adding classes.

Edit in sandbox 
        
            

        <div class="container">
          <span id="rateMe4"  class="feedback"></span>
        </div>  
      
        <!-- rating.js file -->
        <script src="js/addons/rating.js"></script>

      
        
    
        
            

        // Rating Initialization
        $(document).ready(function() {
          $('#rateMe4').mdbRate();
        });