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%; } }




Random Post




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 feedback average and also display in progressbar. nicesnippets provide feedback pa...

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 display in ratting. review display with user image, name and posting time. you c...

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. bootstrap 4 provide new deisgn of user profile. custom profile with social icon. i...

Read More