Thankful to Krajee!
to get more out of us.
Basic usage examples of the bootstrap-star-rating plugin.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Automatically convert any input to a bootstrap star rating control by setting its class as rating. Note that the CSS class rating-loading when added, hides the input when the page is loading, and shows a plugin loading indicator until the widget is entirely loaded
<label for="input-1" class="control-label">Rate This</label>
<input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1">
Support any fractional rating. For example validate a rating between 1 to 5 with a step of 0.1 for 5 stars. Drag and slide across for changing ratings for better effects on touch input devices.
<label for="input-2" class="control-label">Rate This</label>
<input id="input-2" name="input-2" class="rating rating-loading" data-min="0" data-max="5" data-step="0.1">
A quick shortcut to generate a display only rating is by setting the displayOnly property to true. This can be useful when you wish to render a rating widget for display purpose only and prevent any editing ability for the user.
<table>
  <tr>
    <td style="padding-right:10px">
      <label for="input-3" class="control-label">Likes</label>
    </td>
    <td>
      <input id="input-3" name="input-3" value="4" class="rating-loading">
    </td>
  </tr>
</table>
<script>
$(document).on('ready', function(){
    $('#input-3').rating({displayOnly: true, step: 0.5});
});
</script>
Use data attributes to control options. For example, hide/show display of clear button and caption.
<label for="input-4" class="control-label">Rate This</label>
<input id="input-4" name="input-4" class="rating rating-loading" data-show-clear="false" data-show-caption="true">
Initialize star control rating on any input via javascript. Note that you must remove the CSS class rating from your input markup when initializing via javascript.
<label for="input-5" class="control-label">Rate This</label>
<input id="input-5" name="input-5" class="rating-loading" data-show-clear="false" data-show-caption="true">
<script>
$(document).on('ready', function(){
    $('#input-5').rating({clearCaption: 'No stars yet'});
});
</script>
Set the star rating control to be readonly or disabled.
<label for="input-6" class="control-label">Readonly Input</label>
<input id="input-6" name="input-6" class="rating rating-loading" value="0" data-min="0" data-max="5" data-step="1" data-readonly="true">

<label for="input-7" class="control-label">Disabled Input</label>
<input id="input-7" class="rating rating-loading" value="0" data-min="0" data-max="5" data-step="1" data-disabled="true">
Control the size of stars by passing the size parameter. Use these codes in increasing order of size - xs being the smallest and xl being the largest: xs, sm, md, lg, xl.




<label for="input-7-xs" class="control-label">Extra Small Rating</label>
<input id="input-7-xs" class="rating rating-loading" value="1" data-min="0" data-max="5" data-step="0.5" data-size="xs"><hr/>

<label for="input-7-sm" class="control-label">Small Rating</label>
<input id="input-7-sm" class="rating rating-loading" value="2" data-min="0" data-max="5" data-step="0.5" data-size="sm"><hr/>

<label for="input-7-md" class="control-label">Medium Rating</label>
<input id="input-7-md" class="rating rating-loading" value="3" data-min="0" data-max="5" data-step="0.5" data-size="md"><hr/>

<label for="input-7-lg" class="control-label">Large Rating</label>
<input id="input-7-lg" class="rating rating-loading" value="4" data-min="0" data-max="5" data-step="0.5" data-size="lg"><hr/>

<label for="input-7-xl" class="control-label">Extra Large Rating</label>
<input id="input-7-xl" class="rating rating-loading" value="5" data-min="0" data-max="5" data-step="0.5" data-size="xl">

Right to left (RTL) input support. Note that you can add a containerClass for advanced styling.

Note

  • When using the rtl mode, you must ensure that the icon markup you set in filledStar is symmetrical horizontally. This is because the plugin default CSS styling uses a horizontal mirror flipped version of the filledStar markup.

  • The rtl input ratings are by default floated right. You may need to add a <div class="clearfix></div> for bootstrap styling after RTL ratings to ensure that floats are cleared for subsequent content displayed.

  • If you are already using a HTML markup on your page which has the content RTL oriented, then you must be careful in setting the rtl property. For example, if you have an <html dir="rtl"> at top of your page and wish to have a RTL oriented star rating, then you may take one of the following approaches to render a proper RTL rating

    • Option 1: Wrap the rating inside a LTR container e.g. <div dir="ltr">.

    • Option 2: You can set the rtl setting for the plugin to false.

<input id="input-8" name="input-8" class="rating-loading">
<div class="clearfix"></div>
<script>
$(document).on('ready', function(){
    $('#input-8').rating({rtl: true, containerClass: 'is-star'});
});
</script>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.