<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="rating">
<input type="radio" id="star10" name="rating" value="10" /><label for="star10" title="Rocks!">5 stars</label>
<input type="radio" id="star9" name="rating" value="9" /><label for="star9" title="Rocks!">4 stars</label>
<input type="radio" id="star8" name="rating" value="8" /><label for="star8" title="Pretty good">3 stars</label>
<input type="radio" id="star7" name="rating" value="7" /><label for="star7" title="Pretty good">2 stars</label>
<input type="radio" id="star6" name="rating" value="6" /><label for="star6" title="Meh">1 star</label>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Meh">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Kinda bad">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Kinda bad">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Sucks big tim">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</div>
</div>
</div>