Simple jQuery Star Rating Widget For Bootstrap 3 - Bootstrap Rating Input

Simple jQuery Star Rating Widget For Bootstrap 3 - Bootstrap Rating Input

Bootstrap Rating Input is a lightweight jQuery plugin that transform a standard input filed into a simple star rating system with Twitter's Bootstrap 3. The plugin also comes with a function to remove the selected rating.

See also:

How to use it:

1. Include jQuery javascript library and jQuery bootstrap rating input plugin on the page.

<script src=""></script>
<script src="bootstrap-rating-input.min.js"></script>

2. Include Twitter's bootstrap 3 framework on the page.

<link rel="stylesheet" href="">
<script src=""></script>

3. Create a number input field with 'rating' class name on the page. Using data-clearable attribute to define the remove text.

<input type="number" name="My Rating System" id="Demo" class="rating" data-clearable="remove"/>

4. Default plugin options.

  'min': 1,
  'max': 5,
  'empty-value': 0,
  'iconLib': 'glyphicon',
  'activeIcon': 'glyphicon-star',
  'inactiveIcon': 'glyphicon-star-empty',
  'clearable': false,
  'clearableIcon': 'glyphicon-remove',
  'inline': false,
  'readonly': false,
  'copyClasses': true

Change log:


  • Option to disable copying of input classes to rating container


  • Cleanup and bugfixing, bump to version 0.4.0 with readonly and inline features


  • Fixed Clear does not reset to minimum assigned value, it resets to 0


  • Fixed for¬†0x800a139e - JavaScript runtime error


  • Added a check to avoid issues with AJAX


  • Fixed a bug and prettified some code

v0.2.1 (2014-01-14)

  • Added some improvements to the pr for "empty value" use case

This awesome jQuery plugin is developed by javiertoledo. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 13.03.2018
  • Source