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

Basic example

You can automatically initialize the rating component using data-mdb-toggle="rating"

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="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>

Read only

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

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="rating" 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>

Events

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

Show code Edit in sandbox

HTML
JavaScript

<ul class="rating" data-mdb-toggle="rating">
  <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>

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

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

Custom text

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

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="rating">
  <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>

Custom icons

You can use other icons easily. Just change the fa class to whatever you want.

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="rating">
  <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>

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.

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="rating">
  <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>

Icons custom color

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

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="rating">
  <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>

Dynamic icons

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

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="rating" 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>

Styling active elements

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

Show code Edit in sandbox

HTML
CSS

<ul class="rating" data-mdb-toggle="rating">
  <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;
}

Popover implementation example

Rating allows you to easily add popover functionality

Show code Edit in sandbox

HTML
JavaScript

<ul class="rating" data-mdb-toggle="rating">
  <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>

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 onSelect.mdb.rating event that returns a value. Open the browser console to test how it's work

Show code Edit in sandbox

HTML
JavaScript

<ul class="rating" data-mdb-toggle="rating">
  <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>

const icons = document.querySelectorAll('i')

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

Rating - API

Usage

Via data attributes

Show code Edit in sandbox

HTML

<ul class="rating" data-mdb-toggle="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>

Via JavaScript

Show code Edit in sandbox

HTML
JavaScript

<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>

const rating = document.getElementByClassName('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.

Show code Edit in sandbox

HTML
JavaScript

<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-value="1".

Name	Type	Default	Description
`value`	Number	`''`	Set default rating value
`readonly`	Boolean	`false`	Disable hover, click and keypress events
`after`	String	`''`	Set a custom text after the icon
`before`	String	`''`	et a custom text before the icon
`dynamic`	Boolean	`false`	Dynamically change previous icons to the currently selected/hovered icon
`tooltip`	String	`'top'`	set tooltip position
`title`	String	`''`	Set the text displayed in the tooltip (for use only on the icons element)
`color`	String	`''`	Set 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)`

Show code Edit in sandbox

JavaScript

const myRatingEl = document.getElementById('myRating');
const rating = new mdb.Rating(myRatingEl);
rating.dispose();

Events

Name	Description
`onSelect.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.
`onHover.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.

Show code Edit in sandbox

JavaScript

const myRatingEl = document.getElementById('myRating')
myRatingEl.addEventListener('onSelect.mdb.rating', (e) => {
  // do something...
})

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Show code Edit in sandbox

JavaScript

import { Rating } from 'mdb-ui-kit';

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.

Show code Edit in sandbox

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

SCSS variables

Show code Edit in sandbox

SCSS

$rating-icon-padding: 0.25rem;

Rating

Bootstrap 5 Star Rating component

Basic example

Read only

Events

Custom text

Custom icons

Number of icons

Icons custom color

Dynamic icons

Styling active elements

Popover implementation example

Get selected value

Related resources

Rating - API

Usage

Via data attributes

Via JavaScript

Via jQuery

Options

Methods

Events

Import

CSS variables

SCSS variables