Basic Example 1
<label for="input-1" class="control-label">Rate This</label>
<input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1">
<script>
$('#input-1').rating({displayOnly: true, step: 0.5});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 2
<label for="input-2" class="control-label">Rate This</label>
<input id="input-2" name="input-2" class="rating rating-loading" data-min="0" data-max="5" data-step="0.1">
<script>
$('#input-2').rating({displayOnly: true, step: 0.5});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 3
<table>
<tr>
<td style="padding-right:10px">
<label for="input-3" class="control-label">Likes</label>
</td>
<td>
<input id="input-3" name="input-3" value="4" class="rating-loading">
</td>
</tr>
</table>
<script>
$(document).ready(function(){
$('#input-3').rating({displayOnly: true, step: 0.5});
});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 4
<label for="input-4" class="control-label">Rate This</label>
<input id="input-4" name="input-4" class="rating rating-loading" data-show-clear="false" data-show-caption="true">
<script>
$(document).ready(function(){
$('#input-4').rating({displayOnly: true, step: 0.5});
});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 5
<label for="input-5" class="control-label">Rate This</label>
<input id="input-5" name="input-5" class="rating-loading" data-show-clear="false" data-show-caption="true">
<script>
$(document).ready(function(){
$('#input-5').rating({clearCaption: 'No stars yet'});
});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 6
<label for="input-6" class="control-label">Readonly Input</label>
<input id="input-6" name="input-6" class="rating rating-loading" value="0" data-min="0" data-max="5" data-step="1" data-readonly="true">
<label for="input-7" class="control-label">Disabled Input</label>
<input id="input-7" class="rating rating-loading" value="0" data-min="0" data-max="5" data-step="1" data-disabled="true">
<script>
$(document).ready(function(){
$('#input-6').rating({clearCaption: 'No stars yet'});
$('#input-7').rating({clearCaption: 'No stars yet'});
});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 7
<form action="#basic-example-9" method="post">
<input id="input-9" name="input-9" required class="rating-loading">
<hr>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-outline-secondary">Reset</button>
</form>
<script>
$(document).ready(function(){
$('#input-9').rating({clearCaption: 'No stars yet'});
});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 8
<input id="input-8" name="input-8" class="rating-loading">
<script>
$(document).ready(function(){
$('#input-8').rating({rtl: true, containerClass: 'is-star'});
});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}
Basic Example 9
<label for="input-7-xs" class="control-label">Extra Small Rating</label>
<input id="input-7-xs" class="rating rating-loading" value="1" data-min="0" data-max="5" data-step="0.5" data-size="xs"><hr/>
<label for="input-7-sm" class="control-label">Small Rating</label>
<input id="input-7-sm" class="rating rating-loading" value="2" data-min="0" data-max="5" data-step="0.5" data-size="sm"><hr/>
<label for="input-7-md" class="control-label">Medium Rating</label>
<input id="input-7-md" class="rating rating-loading" value="3" data-min="0" data-max="5" data-step="0.5" data-size="md"><hr/>
<label for="input-7-lg" class="control-label">Large Rating</label>
<input id="input-7-lg" class="rating rating-loading" value="4" data-min="0" data-max="5" data-step="0.5" data-size="lg"><hr/>
<label for="input-7-xl" class="control-label">Extra Large Rating</label>
<input id="input-7-xl" class="rating rating-loading" value="5" data-min="0" data-max="5" data-step="0.5" data-size="xl">
<script>
$(document).ready(function(){
$('#input-9').rating();
});
</script>
.rating-container .star{
font-size: 18px;
}
.rating-container .caption .label{
background-color: var(--primary);
color:$white;
}
.rating-md {
font-size: 28px;
line-height: 18px;
}