No Content Found
Rating Bar Html With Bootstrap
Rating progressbar like playstore it is use html css bootstrap
<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>```
## Additional css
```css
.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;
}
.progress-bar-success {
background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
}
Font awesome html link
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'/>
Bootstrap cdn html link
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'/>