Bootstrap 4 Star Rating Example

This is bootstrap 4 star rating system usign star-rating jquery. Best bootstrap jquery star rating plugin. This is most popular star rating jquery source code. in this rating you can give half star. Input type text with star rating.

We allows to free snippets of bootstrap star rating html , you can download full code of bootstrap rating component layout. Here in this post i will give you example of jquery rating stars snippet and you will get simple code of html, css and jquery. In bootstrap-star-rating plugin snippet i give you three tab with html, css and js, you can easily get code of star rating jquery source code layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-star-rating@4.0.2/js/star-rating.js" type="text/javascript"></script>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12 main-section text-center">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12 rating-star-part">
                    <form>
                        <input id="input-21b" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.2 data-size="sm" required tabindex="" itle="">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

body{
    background-color: #502B00;
}
.main-section{
    position: relative;
    padding:40px;
    right: 50%;
    left:50%;
    transform: translate(-50%,50%);
    background-color: white;
}
.rating-container .rating {
    cursor: default;
    position: relative;
    vertical-align: middle;
    display: inline-block;
}
.rating-container .star {
    display:inline-block;
    margin:0 3px;
}
.rating-container .empty-stars {
    font-weight:normal !important;
    color:#5D4C46;
}
.rating-container .filled-stars {
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    color: #fde16d;
    white-space: nowrap;
    overflow: hidden;
    -webkit-text-stroke: 1px #777;
    text-shadow: 1px 1px #999;
}
.rating-sm{
    font-size: 2.5em;
}
.rating-container .clear-rating {
    color: #aaa;
    display: inline-block;
    vertical-align: middle;
    font-size: 60%;
}
.clear-rating-active {
    cursor: pointer !important;
}
.rating-container .clear-rating {
    padding-right: 5px;
}
.rating-container .caption {
    display: inline-block;
    font-size:20px;
}
.rating-container .caption {
    margin-left:15px;
}
.rating-container .caption .label {
    position:absolute;
    top:8px;
    padding:8px;
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Krajee JQuery Plugins - © Kartik</title> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link href="star-rating.css" media="all" rel="stylesheet" type="text/css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap-star-rating@4.0.2/js/star-rating.js" type="text/javascript"></script> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12 col-xs-12 main-section text-center"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12 rating-star-part"> <form> <input id="input-21b" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.2 data-size="sm" required tabindex="" itle=""> </form> </div> </div> </div> </div> </div> </body> </html>

body{ background-color: #502B00; } .main-section{ position: relative; padding:40px; right: 50%; left:50%; transform: translate(-50%,50%); background-color: white; } .rating-container .rating { cursor: default; position: relative; vertical-align: middle; display: inline-block; } .rating-container .star { display:inline-block; margin:0 3px; } .rating-container .empty-stars { font-weight:normal !important; color:#5D4C46; } .rating-container .filled-stars { position: absolute; left: 0; top: 0; margin: auto; color: #fde16d; white-space: nowrap; overflow: hidden; -webkit-text-stroke: 1px #777; text-shadow: 1px 1px #999; } .rating-sm{ font-size: 2.5em; } .rating-container .clear-rating { color: #aaa; display: inline-block; vertical-align: middle; font-size: 60%; } .clear-rating-active { cursor: pointer !important; } .rating-container .clear-rating { padding-right: 5px; } .rating-container .caption { display: inline-block; font-size:20px; } .rating-container .caption { margin-left:15px; } .rating-container .caption .label { position:absolute; top:8px; padding:8px; }