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: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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();
        });