Question

I’m using twitter bootstrap to build my site UI.

I want to create a stars rating page.

I want it to be right to left (meaning one star is chosen to the right)

I see my best opetion is to use Jquery-UI plugin, as bootstrap doesn’t have such a tool?

How to make the rating direction: rtl ?

In addition, how can I adjust the stars to be yellow and not red

(both on hover and after selection) ?

Answer 1

I also use bootstrap. This morning I started looking into star ratings and came across the FontAwesome site. Here you’ll find a working example of Star Ratings within bootstrap.

The CSS-tricks site provides the needed CSS with a good explanation of what it is doing.

I apologize for the lack of links below. As I am “new poster” on stackoverflow I can only include two hyperlinks. So you’ll need to paste the gists into the dabble.com URL to see them. (someone please vote my reputation up so I can post more links 🙂

You can find working examples at the dabblet.com site to play with it a bit before bringing it into your cown code base. The css-tricks dabblet is at https://gist.github.com/1709019
.

There are several other dabblets you may want to review:

@chriscoyier has a different implementation at
https://gist.github.com/1718992
. You can change from LTR to RTL in this implementaion by changing float:right; to float:left;

@mprogano has an even more concise version at https://gist.github.com/1712123. You can change from LTR to RTL using direction: rtl;

Some of the dabble examples allow you to change the star colors, others are using images so you’d have to create your own images to change color.

Hope this helps.