Live Demo - Bootstrap 4 Star Rating Example

See Free Live Demo example of 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 c...

<!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;
}