Twitter Bootstrap rtl rating stars

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) ?

Accepted Answer

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.

Twitter Bootstrap rtl rating stars

Solution

Problem