"rating"
Bootstrap 4.0.0 Snippet by lavan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <!-- Font Awesome Icon Library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .checked { color: orange; } </style> </head> <body> <h2>Star Rating</h2> <span class="fa fa-star" id="star1" onclick="add(this,1)"></span> <span class="fa fa-star" id="star2" onclick="add(this,2)"></span> <span class="fa fa-star" id="star3" onclick="add(this,3)"></span> <span class="fa fa-star" id="star4" onclick="add(this,4)"></span> <span class="fa fa-star" id="star5" onclick="add(this,5)"></span> <script> function add(ths,sno){ for (var i=1;i<=5;i++){ var cur=document.getElementById("star"+i) cur.className="fa fa-star" } for (var i=1;i<=sno;i++){ var cur=document.getElementById("star"+i) if(cur.className=="fa fa-star") { cur.className="fa fa-star checked" } } } </script> </body> </html>

Related: See More

BLK• Design System
Bootstrap 4 User Rating Form / Comment Form
Average user rating, Rating breakdown
Carousel Reviews with Rating - three items

Questions / Comments: