Bootstrap Tutorial
Bootstrap Examples
Bootstrap Advance
Bootstrap Utilities
MCQ
- bootstrap-mcq
Interview Questions

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: