Run
Online Code Editor
<!doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, initial-scale = 1.0"> <title> Bootstrap Star Rating </title> <!-- Add Bootstrap cdn --> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Add bootstrap 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 : yellow; font-size : 20px; } .unchecked { font-size : 20px; } </style> </head> <body> <h1 align = "center">Bootstrap star rating example</h1> <!-- To display checked star rating icons --> <span class = "fa fa-star checked"></span> <span class = "fa fa-star checked"></span> <span class = "fa fa-star checked"></span> <span class = "fa fa-star checked"></span> <!-- To display unchecked star rating icons --> <span class = "fa fa-star unchecked"></span> </body> </html>