<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="row rating-desc">
<div class="col-xs-3 col-md-3 text-right">
<span class="fa fa-star"></span>6
</div>
<div class="col-xs-8 col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 19%">
<span class="sr-only">19%</span>
</div>
</div>
</div>
<div class="col-xs-3 col-md-3 text-right">
<span class="fa fa-star"></span>5
</div>
<div class="col-xs-8 col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80%</span>
</div>
</div>
</div>
<div class="col-xs-3 col-md-3 text-right">
<span class="fa fa-star"></span>4
</div>
<div class="col-xs-8 col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60%</span>
</div>
</div>
</div>
<div class="col-xs-3 col-md-3 text-right">
<span class="fa fa-star"></span>3
</div>
<div class="col-xs-8 col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40%</span>
</div>
</div>
</div>
<div class="col-xs-3 col-md-3 text-right">
<span class="fa fa-star"></span>2
</div>
<div class="col-xs-8 col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20%</span>
</div>
</div>
</div>
<div class="col-xs-3 col-md-3 text-right">
<span class="fa fa-star"></span>1
</div>
<div class="col-xs-8 col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width: 15%">
<span class="sr-only">15%</span>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
<div class="col-xs-12 col-md-6 text-center">
<h1 class="rating-num">5.1</h1>
<div class="rating">
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star-half-empty"></span>
</div>
<div>
<span class="fa fa-user"></span>125888 total votes
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<style>
.fa {
margin-right: 5px;
}
.rating .fa {
font-size: 22px;
}
.rating-num {
margin-top: 0px;
font-size: 60px;
}
.progress {
margin-bottom: 5px;
}
.progress-bar {
text-align: left;
}
.rating-desc .col-md-3 {
padding-right: 0px;
}
.sr-only {
margin-left: 5px;
overflow: visible;
clip: auto;
}
</style>