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
* * 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.
Decimal
If you want to allow fractional ratings, use the decimal option. Option decimalPrecision allows setting the rounding precision for the rating score.
Read only
If you want to use a rating to show the score you can use the readonly option.
Events
Rating emits events after click and hover element. Check the browser console to test it.
Custom text
You can add extra text before or after the icon using data-mdb-after and data-mdb-before attributes.
Custom icons
You can use other icons easily. Just place other icon inside the <li> tag.
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.
Icons custom color
If you want to set your own icon color you can use the data-mdb-color tag.
Dynamic icons
You can make your rating more dynamic by adding data-mdb-dynamic="true" attribute.
Styling active elements
You can use active class to set different styles for selected elements.
Popover implementation example
Rating allows you to easily add popover functionality.
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.