Krajee Logo
bootstrap-star-rating
Donate

Bower version
Stable Version
Unstable Version
License
Packagist Downloads
Monthly Downloads

A simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support.
Developed with a focus on utlizing 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. View the documentation or a complete demo
at Krajee JQuery plugins.

NOTE: Release v4.0 is a modified rewrite with various new enhancements and BC breaking features. It allows rendering richer markup for star symbols and offers theming support.

Star Rating Screenshot

Features

New features/changes since release v4.0

NOTE: Refer change log for details on plugin enhancements, fixes, and changes.

Documentation and Demo

View the plugin documentation and plugin demos at Krajee JQuery plugins.

Pre-requisites

  1. Bootstrap 3.x
  2. Latest JQuery
  3. Most browsers supporting CSS3 & JQuery.

Installation

Using Bower

You can use the bower package manager to install. Run:

bower install bootstrap-star-rating

Using Composer

You can use the composer package manager to install. Either run:

$ php composer.phar require kartik-v/bootstrap-star-rating "@dev"

or add:

"kartik-v/bootstrap-star-rating": "@dev"

to your composer.json file

NOTE: You can use the sass branch for installation using bootstrap-sass dependency.
The master branch can be used for installation using plain bootstrap dependency.

Manual Install

You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin assets (css and js folders) into your project.

Usage

Step 1: Load the following assets in your header.

<!-- default styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />

<!-- optionally if you need to use a theme, then include the theme CSS file as mentioned below -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />

<!-- important mandatory libraries -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/star-rating.min.js" type="text/javascript"></script>

<!-- optionally if you need to use a theme, then include the theme JS file as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/themes/krajee-svg/theme.js"></script>

<!-- optionally if you need translation for your language then include locale file as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/locales/<lang>.js"></script>

If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the star-rating.min.css and star-rating.min.js for
the plugin to work with default settings.

Step 2: Setup your input markup to automatically initialize the rating

<input id="input-id" type="text" class="rating" data-size="lg" >

Step 3: Initialize the plugin on your page for other input types. For example,

// initialize with defaults
$("#input-id").rating();

// with plugin options (do not attach the CSS class "rating" to your input if using this approach)
$("#input-id").rating({'size':'lg'});

The #input-id is the identifier for the input on your page (that you used to initialize the rating), and this input is hidden automatically by the plugin (by adding the bootstrap CSS class hide).

Alternatively, you can directly call the plugin options by setting data attributes to your input field.

License

bootstrap-star-rating is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.