Bootstrap star rating

Star rating allows users to share their opinion (rating) on the document, product, images, videos, and more.

To create checked (filled) star icon, use the below syntax –

To create unchecked star icon, use the below syntax –

Code:

  <!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>  

Test it Now

Output:

Bootstrap star rating

Next TopicBootstrap Tooltip

Bootstrap star rating

Bootstrap star rating

Code:

Add to cart button in Bootstrap

Can I get a virus from Facebook or MySpace

You may also like