Here we are give you rating card design demo. in this rating card design you can display rate out of 5,total user who giving rate,and also display in progress bar with percentage. this rating card also you can display in bootstrap gride view. this ratting box is fully responsive. this rating card design we give you free sources code.

We allows to free snippets of bootstrap star rating demo , you can download full code of bootstrap star rating bar layout. Here in this post i will give you example of bootstrap rating bar snippet and you will get simple code of html, css and jquery. In average user rating bootstrap snippet i give you three tab with html, css and js, you can easily get code of bootstrap rating and voting box layout.


<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed" rel="stylesheet"> </head> <body> <div class="rating-card"> <div><h1>Rating Card</h1></div> <div class="rating"> <h2>4.0</h2> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star"></i> <i aria-hidden="true" class="fa fa-star-o"></i> <p><i class="fa fa-user" aria-hidden="true"></i> 1,050,800 total</p> </div> <div class="rating-process"> <div class="rating-right-part"> <p><i aria-hidden="true" class="fa fa-star"></i> 80%</p> <div class="progress"></div> </div> <div class="rating-right-part"> <p><i aria-hidden="true" class="fa fa-star"></i> 60%</p> <div class="progress-2"></div> </div> <div class="rating-right-part"> <p><i aria-hidden="true" class="fa fa-star"></i> 40%</p> <div class="progress-3"></div> </div> <div class="rating-right-part"> <p><i aria-hidden="true" class="fa fa-star"></i> 20%</p> <div class="progress-4"></div> </div> <div class="rating-right-part"> <p><i aria-hidden="true" class="fa fa-star"></i> 10%</p> <div class="progress-5"></div> </div> </div> <div style="clear:both;"></div> </div> </body> </html>
body{ background:#FE1392; font-family: 'Barlow Semi Condensed', sans-serif; } .rating-card{ padding:10px; background-color:#F5F5F5; width:70%; border-radius:10px; text-align: center; margin: 0 auto; margin-top:30px; box-shadow: 2px 2px 18px -2px #337AB7; } .fa-star,.fa-star-o{ color:orange; } .rating-card h1{ color:#337AB7; margin-bottom:30px; } .rating{ width: 50%; float:left; } .rating p{ margin-top:10px; font-size: 20px; } .rating h2{ margin:0px; font-size:60px; font-weight: normal; } .rating-process{ width: 50%; text-align: left; float:right; } .rating-right-part{ margin-bottom:3px; } .rating-right-part p{ margin:0px; } .progress,.progress-2,.progress-3,.progress-4,.progress-5{ background:#c2c2c2; border-radius: 13px; height:18px; width:70%; padding:3px; margin:-20px 0px 0px 50px; display: block; } .progress:after,.progress-2:after,.progress-3:after,.progress-4:after,.progress-5:after{ content: ''; display: block; background: #337AB7; width:80%; height: 100%; border-radius: 9px; } .progress-2:after{ width: 60%; } .progress-3:after{ width:40%; } .progress-4:after{ width:20%; } .progress-5:after{ width:10%; } @media (min-width:320px) and (max-width:640px){ .rating{ width: 100%; } .rating-process{ width:100%; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post