Ratings

														
<div class="rating my-rating-1 mb-1" data-rating="2.5"></div>
<div class="rating rating-yellow my-rating-1" data-rating="2"></div>
													

														
<!-- Tinymce JS -->
<script src="dist/js/jquery.star-rating-svg.min.js"></script>	

$(".my-rating-1").starRating({
	disableAfterRate: false
});
													

														
<div class="rating my-rating-2 rating-progressive" data-rating="3"></div>
												

														
<form class="row g-3">
	<div class="col-md-4">
		<label for="validationServer01" class="form-label">First name</label>
		<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
		<div class="valid-feedback">
			Looks good!
		</div>
	</div>
	<div class="col-md-4">
		<label for="validationServer02" class="form-label">Last name</label>
		<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
		<div class="valid-feedback">
			Looks good!
		</div>
	</div>
	<div class="col-md-4">
		<label for="validationServerUsername" class="form-label">Username</label>
		<div class="input-group has-validation">
			<span class="input-group-text" id="inputGroupPrepend3">@</span>
			<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
			<div id="validationServerUsernameFeedback" class="invalid-feedback">
				Please choose a username.
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<label for="validationServer03" class="form-label">City</label>
		<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
		<div id="validationServer03Feedback" class="invalid-feedback">
			Please provide a valid city.
		</div>
	</div>
	<div class="col-md-3">
		<label for="validationServer04" class="form-label">State</label>
		<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
			<option selected disabled value="">Choose...</option>
			<option>...</option>
		</select>
		<div id="validationServer04Feedback" class="invalid-feedback">
			Please select a valid state.
		</div>
	</div>
	<div class="col-md-3">
		<label for="validationServer05" class="form-label">Zip</label>
		<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
		<div id="validationServer05Feedback" class="invalid-feedback">
			Please provide a valid zip.
		</div>
	</div>
	<div class="col-12">
		<div class="form-check">
			<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
			<label class="form-check-label" for="invalidCheck3">
			Agree to terms and conditions
			</label>
			<div id="invalidCheck3Feedback" class="invalid-feedback">
				You must agree before submitting.
			</div>
		</div>
	</div>
	<div class="col-12">
		<button class="btn btn-primary" type="submit">Submit form</button>
	</div>
</form>
													

														
$(".my-rating-4").starRating({
	readOnly: true,
	disableAfterRate: false
});
													

														
<div class="rating my-rating-5 mb-1" data-rating="4"></div>
<div class="rating rating-yellow my-rating-5" data-rating="3"></div>
												

														
$(".my-rating-5").starRating({
	tooltipActive: true,
	disableAfterRate: false,
});
													

														
<div class="rating my-rating-1 mb-2" data-rating="2"></div>
<div class="rating rating-lg ratings my-rating-1 mb-2" data-rating="2"></div>
<div class="rating rating-xl my-rating-1" data-rating="2"></div>