Bootstrap Star Rating

Bootstrap Star Rating is a jQuery plugin that converts any HTML input into an interactive star rating control for Bootstrap 5.x, 4.x, or 3.x, featuring fractional star fill, RTL input support, theming, and a suite of JavaScript events.

What is Bootstrap Star Rating?

Bootstrap Star Rating is an open-source, BSD-3-Clause licensed jQuery plugin created by Kartik Visweswaran, developer of the Krajee plugin family. It accepts any HTML input element (text, number, or other) and renders it as a star rating widget complete with a caption and clear button. The plugin relies on pure CSS3 and scalable vector icons for the stars, eliminating image sprites. It is distributed via Bower, Composer, and manual download from GitHub, and the repository has over 1,000 stars.

Key Features

• Fractional star rating — Configure the number of stars, min, max, and step values, enabling half-star or any fractional rating.
• RTL support — Automatically flips star styling for right-to-left languages.
• Theming system — Includes five built-in themes: krajee-svg (default), krajee-uni, krajee-fas, krajee-fa, and krajee-gly, plus custom theme overrides.
• Pure CSS3 stars — No image sprites or background images; optionally use unicode symbols or Font Awesome icons.
• Size presets — Choose from extra-large, large, medium, small, and extra-small control sizes.
• JavaScript events — Fires rating.change, rating.clear, rating.reset, rating.refresh, rating.hover, and rating.hoverleave for advanced integrations.
• Display-only mode — Set the displayOnly property to show a read-only rating.
• Locale support — Localization files are available for translations.

Who is it for?

Bootstrap Star Rating is built for web developers who need a polished, feature-rich rating widget without hand-coding star interactions.

• Full-stack developers can drop a rating control into forms or review systems by adding the rating class to an input.
• Front-end developers can customize themes, sizes, captions, and events to match an existing design system.
• Product teams can collect user feedback with familiar star interactions, including fractional ratings and RTL layouts for international audiences.

What can you do with Bootstrap Star Rating?

• Add a product rating widget — Turn any input into a star control with fractional fill, perfect for half-star reviews.
• Display average ratings — Use displayOnly mode to render a read-only star rating in dashboards or listings.
• Localize the widget — Load locale files to show captions and tooltips in different languages.
• Build a custom-themed widget — Override the default SVG theme with Font Awesome, unicode icons, or your own CSS classes.

How does it work?

Include the provided CSS and JS files, add an input with the rating class (or call $(selector).rating(options)), and pass options via HTML5 data attributes or the plugin's JavaScript API. The plugin hides the original input and renders the star markup, keeping the input value synchronized with user interaction.

FAQ

Is Bootstrap Star Rating free?

Yes, it is open-source under the BSD-3-Clause License and available for free via GitHub, Bower, and Composer.

Which Bootstrap versions are supported?

The plugin supports Bootstrap 5.x, 4.x, and 3.x styles, with Bootstrap 3.x glyphicons available as a theme option.

How do I enable fractional stars?

Set the step option to a value like 0.5. The plugin renders partial fill using CSS and SVG, so half-star ratings work out of the box.

Can I use icons other than stars?

Yes, the filledStar and emptyStar properties allow custom markup, and themes let you use Font Awesome or unicode symbols.

Does it work on mobile devices?

Yes, since version 3.1.0, the plugin supports slide-and-drag interaction for touch devices.