• Convert any HTML input to a star rating control.

• Accessibility enabled and allows rating navigation and modification via the keyboard.

• Easy Configuration: The plugin automatically converts an input to a star rating control if you set its class = rating. All options to the input can be passed as HTML5 data attributes.

• The plugin supports fractional star ratings. So one can have any fractional stars highlighted and managed. This is totally configurable and one of a significant differentiator as compared to most other rating plugins.

• Ability to size the rating control to any size including the stars, caption, and clear button. Five prebuilt size templates are available xl, lg, md, sm, and xs. However one can have their own size configured through a simple CSS manipulation.

• Use any of your favorite font icon frameworks to render your star symbols (for example you can easily use the icons from the FontAwesome library).

• The plugin supports themes for advanced styling.

• The plugin includes translation and locale support for multi languages.

• You can use the HTML 5 number input for polyfill and the plugin will automatically use the number attributes like min, max, and step. However, number inputs have a problem with decimal values on the Chrome Browser. Read the Browser Support section below.

• Involves pure CSS3 styling of the stars. Say goodbye to image sprites or playing with image backgrounds. Offers clean scalable vector icons for consistent display across devices.

• Specifically uses Bootstrap 3.x styles & glyphs. Can be combined to work better for Bootstrap styled projects (or input group addons).

• Ability to clear values and options for the stars. Control where the clear button element can be shown.

• Reset star rating to the initial value when the form is reset.

• Ability to control and display caption of the selected stars. Each rated star can have its own caption. Control where the caption element can be shown.

• Support for RIGHT TO LEFT (RTL) input. Automatically changes star styling for RTL.

• Triggers JQuery events for advanced development. Events currently available are rating:change, rating:clear, and rating:reset.

• Disabled and readonly input star rating support.

• Change stars and caption on mouse hover (new feature since v3.0.0).

• Change stars and caption on slide and drag for mobile/touch devices (new feature since v3.1.0).

• BC Breaking Changes: The symbol and glyphicon properties have been be removed. The functionality is replaced with the theme property (and can also be complemented or implemented separately using the containerClass property).

• New property theme will assign a CSS class with the rating-<theme-name> to the rating container. Themes included with the plugin:

  • krajee-svg (for displaying SVG icons)

  • krajee-gly (for displaying bootstrap 3.x glyphicons)

  • krajee-uni (for displaying UNICODE symbols as stars)

  • krajee-fa (for displaying FONT AWESOME 4.x icons)

  • krajee-fas (for displaying FONT AWESOME 5.x icons and above)

• Add ability to override and add one's own themes.

• Stars now have a better padding and spacing that can be configured via CSS and themes.

• New property filledStar that will allow one to set the markup for filledStar. This defaults to <i class="glyphicon glyphicon-star"></i>. Note that unlike earlier releases no symbol is needed anymore. One can setup a HTML markup here and can thus achieve richer/complex markup for displaying their stars.

• New property emptyStar that will allow one to set the markup for emptyStar. This defaults to <i class="glyphicon glyphicon-star-empty"></i>. Note that unlike earlier releases no symbol is needed anymore. One can setup a HTML markup here and can thus achieve richer/complex markup for displaying their stars.

• Exclusive support for SVG (and a prebuilt krajee-svg theme that contains two different ready to use SVG icons).

• Ability to easily set the widget as a "display only" rating via displayOnly property.

• New property animate to control animation of highlighted stars on hover or click.

1. Latest JQuery

2. Most modern browsers supporting CSS3, HTML5 inputs, & JQuery. For Internet Explorer, one must use IE versions 9 and above to render the rating.

3. Bootstrap 3.x is optional and used by default, but can be overridden to use any CSS.

The bootstrap-star-rating plugin can be installed automatically or manually using one of these options:

$ bower install bootstrap-star-rating

$ npm install bootstrap-star-rating

$ php composer.phar require kartik-v/bootstrap-star-rating "dev-master"

"kartik-v/bootstrap-star-rating": "dev-master"

Step 1: Load the following assets in your header.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/css/star-rating.css" media="all" rel="stylesheet" type="text/css" />

<!-- optionally if you need to use a theme, then include the theme file as mentioned below -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/js/star-rating.js" type="text/javascript"></script>

<!-- optionally if you need to use a theme, then include the theme file as mentioned below -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/themes/krajee-svg/theme.js"></script>

<!-- optionally if you need translation for your language then include locale file as mentioned below (replace LANG.js with your locale specific file) -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/js/locales/LANG.js"></script>

If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the star-rating.min.css and star-rating.min.js. The theme files and translation files are optional addons.

Step 2a: Initialize the plugin on your page. For example,

// initialize with defaults
$("#input-id").rating();
 
// with plugin options
$("#input-id").rating({min:1, max:10, step:2, size:'lg'});

The #input-id is the identifier for the input on your page, which is hidden automatically by the plugin.

Step 2b: Alternatively, you can directly set the plugin options to any input, through HTML 5 data attributes to your input field.

<input id="input-id" name="input-name" type="number" class="rating" min=1 max=10 step=2 data-size="lg" data-rtl="true">

The plugin has been implemented as extensions in the following frameworks

Do you know any other framework extension using this plugin which is not listed here? Tell us so that we can consider its inclusion in this list.

bootstrap-star-rating is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.