Member-only story

Bootstrap star rating — easy rating Plugin

YvonneDev
2 min readMar 1, 2022

--

This plugin is based on Javascript, it can be easily manipulated with html5 attributes.

Official site

Step1:

link 4 libraries

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” rel=”stylesheet”>

<link href=”https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/css/star-rating.css” rel=”stylesheet”>

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

<script src=”https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/js/star-rating.js”></script>

Step2:

HTML

rating section is an input tag, the default value is 4.3.

rating-loading is a spinner when the starts do not show.

Step3:

js

simply select the input DOM, and fire it up with .rating()

The basic options:(I think useful)

min, max: the minimum and maximum of the stars rating number.

step: changing step period

stars: the star number shows

showCaptions: if want to hide the captions, set them to false

--

--

YvonneDev
YvonneDev

Written by YvonneDev

❤️Front-end Web Development self-taught *share what I learned*

No responses yet