Rating

Bootstrap 5 Star Rating component

Responsive star rating built with the latest Bootstrap 5. Rating provides insight into others opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces)

Rating component can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Rating *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

You can automatically initialize the rating component using data-mdb-rating-init attribute.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm text-primary" title="Bad"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="Poor"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="OK"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="Good"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="Excellent"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Read only

If you want to use a rating to show the score you can use the readonly option.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init data-mdb-readonly="true" data-mdb-value="3">
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Events

Rating emits events after click and hover element. Check the browser console to test it.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";
            initMDB({ Rating });

            const icon = document.querySelectorAll('#events-example i');

            icon.forEach((el) => {
              el.addEventListener('scoreHover.mdb.rating', () => {
                console.log('scoreHover');
              });
              el.addEventListener('scoreSelect.mdb.rating', () => {
                console.log('scoreSelect');
              });
            })
          
        
    
        
            
            const icon = document.querySelectorAll('#events-example i');

            icon.forEach((el) => {
              el.addEventListener('scoreHover.mdb.rating', () => {
                console.log('scoreHover');
              });
              el.addEventListener('scoreSelect.mdb.rating', () => {
                console.log('scoreSelect');
              });
            })

Custom text

You can add extra text before or after the icon using data-mdb-after and data-mdb-before attributes.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="1" data-mdb-before="1"></i></li>
              <li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="2" data-mdb-before="2"></i></li>
              <li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="3" data-mdb-before="3"></i></li>
              <li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="4" data-mdb-before="4"></i></li>
              <li class="px-2 d-flex"><i class="far fa-star fa-sm text-primary" data-mdb-after="5" data-mdb-before="5"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Custom icons

You can use other icons easily. Just place other icon inside the <li> tag.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-heart fa-sm text-primary"></i></li>
              <li><i class="far fa-heart fa-sm text-primary"></i></li>
              <li><i class="far fa-heart fa-sm text-primary"></i></li>
              <li><i class="far fa-heart fa-sm text-primary"></i></li>
              <li><i class="far fa-heart fa-sm text-primary"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Number of icons

If you want to display more or less icons in your rating, all you have to do is add as many icons as you like inside the <ul> tag.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Icons custom color

If you want to set your own icon color you can use the data-mdb-color tag.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm" data-mdb-color="#673ab7"></i></li>
              <li><i class="far fa-star fa-sm" data-mdb-color="#3f51b5"></i></li>
              <li><i class="far fa-star fa-sm" data-mdb-color="#2196f3"></i></li>
              <li><i class="far fa-star fa-sm" data-mdb-color="#03a9f4"></i></li>
              <li><i class="far fa-star fa-sm" data-mdb-color="#00bcd4"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Dynamic icons

You can make your rating more dynamic by adding data-mdb-dynamic="true" attribute.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init data-mdb-dynamic="true">
              <li><i class="far fa-angry fa-lg" data-mdb-color="#673ab7"></i></li>
              <li><i class="far fa-frown fa-lg" data-mdb-color="#3f51b5"></i></li>
              <li><i class="far fa-meh fa-lg" data-mdb-color="#2196f3"></i></li>
              <li><i class="far fa-smile fa-lg" data-mdb-color="#03a9f4"></i></li>
              <li><i class="far fa-grin-stars fa-lg" data-mdb-color="#00bcd4"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Styling active elements

You can use active class to set different styles for selected elements.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
            </ul>
          
        
    
        
            
            .active {
              color: #00c851;
            } 
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";

            initMDB({ Rating });

Popover implementation example

Rating allows you to easily add popover functionality.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";
            initMDB({ Rating });

            const popoverIcon = document.querySelectorAll('#popover-example i');

            popoverIcon.forEach((el) => {
              return new Popover(el, {content: 'Example text', placement: 'top'});
            })
          
        
    
        
            
          const popoverIcon = document.querySelectorAll('#popover-example i');

          popoverIcon.forEach((el) => {
            return new mdb.Popover(el, {content: 'Example text', placement: 'top'});
          })

Get selected value

To get the value selected by the user just listen for the scoreSelect.mdb.rating event that returns a value. Open the browser console to test how it's work.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
              <li><i class="far fa-star fa-sm text-primary"></i></li>
            </ul>
          
        
    
        
            
            // Initialization for ES Users
            import { Rating, initMDB } from "mdb-ui-kit";
            initMDB({ Rating });

            const icons = document.querySelectorAll('i')

            icons.forEach((el) => {
              el.addEventListener('scoreSelect.mdb.rating', (e) => {
                console.log('e.value')
              })
            })
          
        
    
        
            
            const icons = document.querySelectorAll('i')

            icons.forEach((el) => {
              el.addEventListener('scoreSelect.mdb.rating', (e) => {
                console.log('e.value')
              })
            })

Rating - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
        
            
          import { Rating, initMDB } from "mdb-ui-kit";
          
          initMDB({ Rating });
        
        
    
        
            
          import "mdb-ui-kit"

Usage

Via data attributes

Using the Rating component doesn't require any additional JavaScript code - simply add data-mdb-rating-init attribute to .rating and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-rating-init>
              <li><i class="far fa-star fa-sm text-primary" title="Bad"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="Poor"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="OK"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="Good"></i></li>
              <li><i class="far fa-star fa-sm text-primary" title="Excellent"></i></li>
            </ul>

Via JavaScript

Edit in sandbox 
        
            
          const element = document.querySelector('.rating');
          const instance = new Rating(rating, options);
        
        
    
        
            
          const element = document.querySelector('.rating');
          const instance = new mdb.Rating(rating, options);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
          <ul class="rating">
            <li><i class="far fa-star fa-sm text-primary" title="Bad"></i></li>
            <li><i class="far fa-star fa-sm text-primary" title="Poor"></i></li>
            <li><i class="far fa-star fa-sm text-primary" title="OK"></i></li>
            <li><i class="far fa-star fa-sm text-primary" title="Good"></i></li>
            <li><i class="far fa-star fa-sm text-primary" title="Excellent"></i></li>
          </ul>
        
        
    
        
            
          $(document).ready(() => {
            $('.rating').rating(options);
          });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-tooltip="top".

Name Type Default Description
value Number '' Sets default rating value
readonly Boolean false Disable hover, click and keypress events
after String '' Sets a custom text after the icon
before String '' Sets a custom text before the icon
dynamic Boolean false Dynamically change previous icons to the currently selected/hovered icon
tooltip String 'top' Sets tooltip position. Available directions are: top, right, bottom, left
title String '' Sets the text displayed in the tooltip (for use only on the icons element)
color String '' Sets icon color (for use only on the icons element)

Methods

Name Description Example
dispose Removes a mdb.Rating instance myRating.dispose()
getInstance Static method which allows you to get the rating instance associated to a DOM element. Rating.getInstance(myRatingEl)
getOrCreateInstance Static method which returns the rating instance associated to a DOM element or create a new one in case it wasn't initialized. Rating.getOrCreateInstance(myRatingEl)
Edit in sandbox 
        
            
          const myRatingEl = document.getElementById('myRating');
          const rating = new Rating(myRatingEl);
          rating.dispose();
        
        
    
        
            
        const myRatingEl = document.getElementById('myRating');
        const rating = new mdb.Rating(myRatingEl);
        rating.dispose();

Events

Name Description
scoreSelect.mdb.rating This event fires immediately when you clicked on icon. The clicked element is available as the target property of the event, and selected value as the value property.
scoreHover.mdb.rating This event fires immediately when you hovered on icon. The hovered element is available as the target property of the event, and hovered value as the value property.
Edit in sandbox 
        
            
          const myRatingEl = document.getElementById('myRating')
          myRatingEl.addEventListener('scoreSelect.mdb.rating', (e) => {
            // do something...
          })

CSS variables

As part of MDB’s evolving CSS variables approach, rating now use local CSS variables on .rating for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Edit in sandbox 
        
            
        // .rating
        --#{$prefix}rating-icon-padding: #{$rating-icon-padding};

SCSS variables

Edit in sandbox 
        
            
        $rating-icon-padding: 0.25rem;