Bootstrap Rating Input

Another plugin that eases the generation of rating stars for jQuery and Bootstrap
Alternatives To Bootstrap Rating Input
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Selectize.js12,93360010517 days ago7July 12, 201851apache-2.0SCSS
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Bootstrap Select9,7359653263 days ago47April 20, 2022292mitJavaScript
:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Metro Ui Css6,9888416 days ago99June 23, 202267mitCSS
Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
X Editable6,464
6 months ago622mitJavaScript
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
Jquery Ui Bootstrap5,486
45 years agoMarch 15, 201549HTML
A jQuery UI theme based on Twitter Bootstrap
a month ago1January 27, 2018199apache-2.0JavaScript
Drag and drop website builder javascript library.
Bootstrap Fileinput5,2581,182353 months ago89August 17, 202214otherJavaScript
An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
10 days ago26mitHTML
:tada: (RuoYi)官方仓库 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用
Bootstrap Multiselect3,62082212 months ago4August 01, 2021302otherHTML
JQuery multiselect plugin based on Twitter Bootstrap.
Dcat Admin3,450524 days ago72June 27, 2022228mitPHP
🔥 基于 Laravel 的后台系统构建工具 (Laravel Admin),使用很少的代码快速构建一个功能完善的高颜值后台系统,内置丰富的后台常用组件,开箱即用,让开发者告别冗杂的HTML代码
Alternatives To Bootstrap Rating Input
Select To Compare

Alternative Project Comparisons

Bootstrap Rating Input

CDNJS version

This is another plugin that eases the generation of rating stars for jQuery and Bootstrap.

It generates widgets like this:

Rating example

But, why another damn rating plugin???

Because it made sense back in 2013 when most rating plugins depended on PNG images. As noted by dandv, in 2016 there are quite a few modern libraries that don't depend on them anymore.

And also... why not!!?

Ok, enough talking, tell me how this thing works!

If you're using bower to manage your frontend dependencies you can install this plugin by just issuing this command:

bower install bootstrap-rating-input --save

Otherwise you can just download build/bootstrap-rating-input.min.js, put it wherever you usually put JavaScripts in your project and include it on pages where you want to have forms with ratings:

<script src="path/to/javascripts/bootstrap-rating-input.min.js" type="text/javascript"></script>

Now add a input of type number to your forms and add the class rating to it:

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" />

That's all! When page loads, you'll find a few stars where you'd expect to find the input. It works just like most of rating plugins, but for the basic usage you don't need to learn anything else about options or initializations, it just works out of the box.

Wait, where is my input?

The plugin transforms your number input into a hidden field and wraps it inside a div (Or a span with the inline option) along with the star icons that will catch your clicks and save the selected values into the hidden field. By doing this, the field still exist in your form and can be submitted or its current value read by jQuery normally. Any CSS class in addition to rating will be copied to the wrapper for further styling options.

Nice, but I want to use a different number of stars

Sure! You can set min and max values adding data-min and data-max:

<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" />

Can I set a default value?

Definitely, just set an integer value in your input that's within your min-max range':

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" value="3"/>

Can I set a special value for empty ratings?

You can add the attribute data-empty-value to indicate which value should send the form when it have an empty rating. This can be used, for example, to have an special value indicating the user didn't perform a selection:

<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" data-empty-value="0"/>

By default empty ratings will behave like a regular empty field.

And what about clearing the stars?

By default once you set a value it remains set and you can only change it by another, but you can add a clear link by just defining the data-clearable attribute:

<input class="rating" data-clearable="remove" id="some_id" name="your_awesome_parameter" type="number" />

The content of data-clearable will appear as label for the link. If no value is provided the plugin will display just the clear icon.

You can also add a data-clearable-remain attribute to true if you'd like the clear link to remain up even when there are no stars selected:

<input class="rating" data-clearable="remove" data-clearable-remain="true" id="some_id" name="your_awesome_parameter" type="number" />

By default the clear link will be hidden whenever no stars are selected.

Can I use custom icon classes?

Now you can use custom icons thanks to the awesome contribution by johncadigan. You can set different icon classes from gliphicons or even load icons from other libraries you're using. For instance here is how you generate a heart rating input with font awesome (You can see it working in the demo.html file):

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" data-icon-lib="fa" data-active-icon="fa-heart" data-inactive-icon="fa-heart-o" data-clearable-icon="fa-trash-o"/>

If you want to use FontAwesome, remember to include the library in your header:

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

Inline render

If you need to render the rating input inline with your text, use the data-inline option:

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-inline />

This will wrap the input in a span element instead of the default div.

Readonly mode

Thanks to the contribution by iyedb this plugin now features a read-only mode. Just add the attribute data-readonly to do the trick:

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" value="2" data-readonly />

I don't want to be forced to add the rating class to the inputs

The rating class is used in combination with input[type=number] to let you autoload the rating plugin without coding anything, but you can apply this plugin to a input of any type by executing the method rating on a jQuery selection and pass the options in an object:

  clearable: true


You know... Twitter Bootstrap and jQuery!

It looks nice, but I want to complain because it doesn't fit my favorite use case

I have implemented this for my project in my environment and sharing it for free. Leave me an issue with your suggestions and I'll eventually push a fix, but this is MIT licensed, so you're welcome to fork this project, do pull requests with fixes and improvements, reimplement better versions of it for your own or do whatever you want, I'll be happy if it becomes useful or inspires at least one more person.

Ok, I want to contribute

Nice! You're awesome, fork the project, and do whatever changes you want into src/bootstrap-rating-input.js. If you're kind enough I'll appreciate that you maintain the minified version updated and to ease this step I've automated minification with grunt, so if you have npm installed you can issue following command to update the minified version:

$ npm install && grunt


Popular Bootstrap Projects
Popular Jquery Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.