Simple Star Rating Plugin For Bootstrap 4/3 - Rating Input

File Size: 19.7 KB
Views Total: 29630
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Star Rating Plugin For Bootstrap 4/3 - Rating Input

Bootstrap Rating Input is a lightweight jQuery plugin that transforms a standard input filed into a simple star rating system styling with Twitter's Bootstrap 4 or Bootstrap 3.

Main Features:

  • Rating values are stored in the regular input fields.
  • Allows you to specify the min/max rating values.
  • Custom rating symbols.
  • Inline & Read-Online modes.

See also:

How to use it:

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

<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Bootstrap 3 -->
<script src="/path/to/build/bootstrap-rating-input.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/path/to/build/bootstrap4-rating-input.min.js"></script>

2. Include the latest Bootstrap 4 or Bootstrap 3 framework on the page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

3. Include the latest Font Awesome for the rating symbols (Required for Bootstrap 4).

<script src=""></script>

4. Create a number input field with 'rating' class name on the page and the plugin will do the rest. You're able to define the remove text by using the data-clearable attribute as follows:

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

5. All plugin options to customize the rating system.


  // min/max values
  'min': 1,
  'max': 5,

  // empty value
  'empty-value': 0,

  // custom icons here
  'iconLib': 'fa',
  'activeIcon': 'fa-star',
  'inactiveIcon': 'fa-star-o',

  // is clearable?
  'clearable': false,
  'clearableIcon': 'fa-remove',
  'clearableRemain': false,

  // inline mode?
  'inline': false,

  // readonly mode?
  'readonly': false,

  // whether to copy CSS classes
  'copyClasses': true

6. You're also allowed to pass the options via data-OPTION attributes:

<input type="number" 
       value="4" />



  • Added Bootstrap 4 version.


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