Last Updated: October 04, 2020
· javier_toledo

Easy star-ratings in jQuery and Bootstrap

I was wondering an easy way to add a rating widget to a Bootstrap project, but everything I found seemed a bit outdated or overweighted for my needs, so I've created another plugin to do this:

This is a very simple approach and it won't fit every use case, but it has some advantages:

  • You don't need to learn anything about configuration, it just works.
  • You can use it without writing a single line of code, just include the library on a website and add a class to an input and you're ready.
  • It doesn't require to add other libraries than jQuery and Bootstrap.
  • It looks nice on Bootstrap apps.

Of course I'm open to comments and suggestions. I just expect it to be useful for someone else ;-)

Related protips:

Change the Bootstrap NavBar Breakpoint

12 Responses
Add your response

This is rad 12:45am find! Thanks for making my grind less painful!

over 1 year ago ·

@bendayhoe You are welcome :-)

over 1 year ago ·

Very cool work on this item mate. thanks a lot for taking the time. saved me a lot of hassle with building a rating widget from scratch ;) - cheers.

over 1 year ago ·

Nice one! Do you know how to implement "half star" so we can better fine tune the ratings?
For voting is ok just with 5 stars but when displaying ratings of many items it is nice to have at least half star or we risk to have many similar ratings.

I know is out of scope of your plugin as you say in github it is enough with this
<i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star-empty'></i><i class='glyphicon glyphicon-star-empty'></i>

Do you know to do some kind of "half-empty" in CSS???ç

Thanks a lot and feliz navidad

over 1 year ago ·

@sagive thanks, I'm glad it to be useful :-)

@antorome "half stars" cannot be done yet with this widget, but its planned for some future version. You can leave your comments on this issue if you'd like to share any ideas:

Extending the plugin to render readonly representations of ratings is also planned here:

Meanwhile, to generate static half stars you can use Font Awesome with one of these icon classes:

Thanks for your comments! :-)

over 1 year ago ·

Hi again,

the point would be to avoid using both glyphicons and fa.

I have tried with this but didn't manage to clip de star

Also with the second method of
and almost did it but I couldn't.

Any suggestion?

over 1 year ago ·

@antorome I think these approaches wont work because gliphicons are not images, but a typeface. What about just using Fontawesome on entire project and get rid of Gliphicons? There are equivalents for every gliphicon and you win the half stars :-)

over 1 year ago ·


This is the CSS you need to make a half-star (didn't implement it, I was just playing around with the console)

.glyphicon.glyphicon-star:after {
content: "\e007";
} {
width: 0.5em;
overflow: hidden;
margin-right: 0.5em;

over 1 year ago ·

@gastonius that's a nice approach, but I think I'd prefer to use half star icons from fontawesome:

What I'm thinking to do is detecting with JS when the mouse is on the first or second half of the star and replace the icon by the half or full star in each case. This is one of the main requests on github, so I promise this will be one of the first things I'll do when I have time ;-)

over 1 year ago ·

thanks! i'm pretty newbie coder, and I am doing something wrong cause i see no starts - only empty small squares. Added <script src="bootstrap-rating-input.min.js" type="text/javascript"></script> at the end of my project, saved bootstrap-rating-input.min.js in my server folder with the code found here, added div container in my page. What am I doing wrong?

over 1 year ago ·

@perettxintxola may be you need to include bootstrap with gliphicons in your page. Try adding this line to the <header> section in your HTML code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//">
over 1 year ago ·

Hey, this is an awesome library you have over here.... I am facing an issue when using bootstrap 4.0. I cant seem to get it running. The stars just do not show up. It works if I switch back to bootstrap 3

over 1 year ago ·