Star Rating In jQuery For Bootstrap 3/4/5

Other
Simple jQuery Star Rating System For Bootstrap
File Size: 5.79 KB
Views Total: 2811 views
Last Update:February 29, 2024
Publish Date: February 25, 2014
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A simple powerful Free jQuery star rating plugin for Bootstrap, which have supports advanced features like fractional star fill and RTL input support. it convert normal input tag to  star rating widget using and Developed with a focus on utilizing pure CSS-3 styling to render the control. The plugin uses Bootstrap markup and styling by default, but it can be overridden with any other CSS markup.

How to use :

 Include the jQuery Bootstrap Star Rating plugin’s java Script and CSS files after jQuery library.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core Stylesheet -->
<link href="/path/to/css/star-rating.min.css" rel="stylesheet" />
<!-- Core JavaScript -->
<script src="/path/to/js/star-rating.min.js"></script>
<!-- Languages -->
<script src="/path/to/js//locales/de.js"></script>
<!-- krajee-fa Theme -->
<link href="/path/to/themes/krajee-fa/theme.min.css" rel="stylesheet" />
<script src="/path/to/themes/krajee-fa/theme.min.js"></script>
<!-- krajee-fas Theme -->
<link href="/path/to/themes/krajee-fas/theme.min.css" rel="stylesheet" />
<script src="/path/to/themes/krajee-fas/theme.min.js"></script>
<!-- krajee-svg Theme -->
<link href="/path/to/themes/krajee-svg/theme.min.css" rel="stylesheet" />
<script src="/path/to/themes/krajee-svg/theme.min.js"></script>
<!-- krajee-uni Theme -->
<link href="/path/to/themes/krajee-uni/theme.min.css" rel="stylesheet" />
<script src="/path/to/themes/krajee-uni/theme.min.js"></script>

Create a number input on web page. Use input’s attributes to customize the star rating widget.

<input id="rating-system" type="number" class="rating" min="1" max="5" step="1">

Initialize the plugin on your page. 

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

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v4.1.2
  • v4.1.1
  • v4.1.0
  • v4.0.9
  • v4.0.8
  • v4.0.7
  • v4.0.6
  • v4.0.5
  • v4.0.4
  • v4.0.2
  • v4.0.1
  • v4.0.0
  • v3.5.8
  • v3.5.7
  • v3.5.6
  • v3.5.5
  • v3.5.4
  • v3.5.3
  • v3.5.2
  • v3.5.1
  • v3.5.0
  • v3.4.0
  • v3.3.0
  • v3.2.0
  • v3.1.0
  • v3.0.0
  • v2.6.0
  • v2.5.0
  • v2.0.0
  • v1.2.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like