Bootstrap star rating

by Online Tutorials Library July 14, 2022

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