How to create star rating using bootstrap and jquery example

How to create star rating using bootstrap and jquery example

In this article we will see that how can we create star rating using bootstrap and jquery with an example. Star rating a technic to show the user’s response or feedback to any product or services. The star rate can help to users or customer to rely on that product or service.

We will show maximum five star rates and out of five as much as star would be dark yellow that would be the actual rate.

We will use star rating jquery and bootstrap plugin to create star rating widget. 

Basically we add a class  to the input field [input class="rating"].  And this will automatically add star ratings. This thing will be by jquey and bootstrap will give it an attractive look.

You can change the rating sizes according to your need by changing bootstrap classes like xllgmdsm, and xs.

You can give rate by hovering to the stars how much you want. And you can use it to display only that should not be changed on hover by adding readonly attribute to the input field.

Let’s see the example. It is very easy to add in your project. I am creating a file ratings.php where all the code would be written. Since this totally based on html and javascript, you can create .html file and copy the code. You have to give only numbers to input fields it will automatically convert into ratings.

Star rating example:

ratings.php

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 5 star rating example using jQuery star rating plugin</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/css/star-rating.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/js/star-rating.min.js"></script>
</head>
<body>


<div class="container">

    <h3>How to create star rating using bootstrap and jquery example</h3>

    <br/>
    <label for="star-rating-id" class="control-label">No stars yet:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="0" data-min="0" data-max="5" data-step="0.5" data-size="xs"> 
    <br/> 

    <label for="star-rating-id" class="control-label">One star:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="1" data-min="0" data-max="5" data-step="0.5" data-size="xs"> 
    <br/> 

    <label for="star-rating-id" class="control-label">Two stars:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="2" data-min="0" data-max="5" data-step="0.5" data-size="sm"> 
    <br/> 

    <label for="star-rating-id" class="control-label">Three stars:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="3" data-min="0" data-max="5" data-step="0.5" data-size="md"> 
    <br/> 

    <label for="star-rating-id" class="control-label">Four stars:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="4" data-min="0" data-max="5" data-step="0.5" data-size="lg"> 
    <br/> 

    <label for="star-rating-id" class="control-label">Five stars:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="5" data-min="0" data-max="5" data-step="0.5" data-size="xl"> 
    <br/> 

    <label for="star-rating-id" class="control-label">Read only stars:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="3" data-min="0" data-max="5" data-step="1" data-readonly="true" data-size="xl"> 
    <br/> 

    <label for="star-rating-id" class="control-label">Hide clear icon:</label> 
    <input id="star-rating-id" name="star-rating-id" class="rating rating-loading" value="3" data-show-clear="false" data-show-caption="true">
</div>


<script>
$("#star-rating-id").rating();
</script>


</body>
</html>

 

You can try this example, modify and use this to your web applications or projects.