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:





Related Post

Feedback page responsive design using bootstrap

Feedback page responsive design using bootstrap

Bootstrap best feedback page design we provide feedback ratting with star and fe...

Read More
Review and Feedback single page responsive design using bootstrap

Review and Feedback single page responsive design using boot...

In this example we display user review and it will convert in average the it dis...

Read More
Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bo...

Read More

Random Post