"Average user rating, Rating breakdown"
Bootstrap 3.3.0 Snippet by regue

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="favicon.ico"> <title>Fixed Top Navbar Example for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/navbar-fixed-top.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="rating-block"> <h4>Valoración</h4> <h2 class="bold padding-bottom-7">4.8 <small>/ 5</small></h2> <button type="button" class="btn btn-primary btn-sm" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-primary btn-sm" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-primary btn-sm" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-primary btn-sm" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-sm" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> </div> <div class="col-sm-3"> <h4>Rating General</h4> <div class="pull-left"> <div class="pull-left" style="width:35px; line-height:1;"> <div style="height:9px; margin:5px 0;">5 <span class="glyphicon glyphicon-star"></span></div> </div> <div class="pull-left" style="width:180px;"> <div class="progress" style="height:9px; margin:8px 0;"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 1000%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="pull-right" style="margin-left:10px;">3876</div> </div> <div class="pull-left"> <div class="pull-left" style="width:35px; line-height:1;"> <div style="height:9px; margin:5px 0;">4 <span class="glyphicon glyphicon-star"></span></div> </div> <div class="pull-left" style="width:180px;"> <div class="progress" style="height:9px; margin:8px 0;"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="pull-right" style="margin-left:10px;">3741</div> </div> <div class="pull-left"> <div class="pull-left" style="width:35px; line-height:1;"> <div style="height:9px; margin:5px 0;">3 <span class="glyphicon glyphicon-star"></span></div> </div> <div class="pull-left" style="width:180px;"> <div class="progress" style="height:9px; margin:8px 0;"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="width: 60%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="pull-right" style="margin-left:10px;">2000</div> </div> <div class="pull-left"> <div class="pull-left" style="width:35px; line-height:1;"> <div style="height:9px; margin:5px 0;">2 <span class="glyphicon glyphicon-star"></span></div> </div> <div class="pull-left" style="width:180px;"> <div class="progress" style="height:9px; margin:8px 0;"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: 40%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="pull-right" style="margin-left:10px;">22</div> </div> <div class="pull-left"> <div class="pull-left" style="width:35px; line-height:1;"> <div style="height:9px; margin:5px 0;">1 <span class="glyphicon glyphicon-star"></span></div> </div> <div class="pull-left" style="width:180px;"> <div class="progress" style="height:9px; margin:8px 0;"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5" style="width: 20%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> <div class="pull-right" style="margin-left:10px;">3</div> </div> </div> </div> <div class="row"> <div class="col-sm-7"> <hr/> <div class="review-block"> <div class="row"> <div class="col-sm-3"> <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded"> <div class="review-block-name"><a href="#">Raúl López</a></div> </div> <div class="col-sm-9"> <div class="review-block-rate"> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> <div class="review-block-title">Todo perfecto</div> <div class="review-block-description">Proceso de compra sencillo y entrega eficaz.</div> </div> </div> <hr/> <div class="row"> <div class="col-sm-3"> <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded"> <div class="review-block-name"><a href="#">Luis Mariscal</a></div> </div> <div class="col-sm-9"> <div class="review-block-rate"> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-success btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> <div class="review-block-title">Repetiré</div> <div class="review-block-description">Todo perfecto. Cumplen con lo solicitado.</div> </div> </div> <hr/> <div class="row"> <div class="col-sm-3"> <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded"> <div class="review-block-name"><a href="#">Ana Martos</a></div> </div> <div class="col-sm-9"> <div class="review-block-rate"> <button type="button" class="btn btn-primary btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-primary btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-primary btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-primary btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> <div class="review-block-title">Contenta</div> <div class="review-block-description">Muy ágiles para tramitar mi pedido.</div> </div> </div> </div> </div> </div> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="js/ie10-viewport-bug-workaround.js"></script> </body> </html>
body { padding-top: 70px; } .btn-grey{ background-color:#D8D8D8; color:#FFF; } .rating-block{ background-color:#FAFAFA; border:1px solid #EFEFEF; padding:15px 15px 20px 15px; border-radius:3px; } .bold{ font-weight:700; } .padding-bottom-7{ padding-bottom:7px; } .review-block{ background-color:#FAFAFA; border:1px solid #EFEFEF; padding:15px; border-radius:3px; margin-bottom:15px; } .review-block-name{ font-size:12px; margin:10px 0; } .review-block-date{ font-size:12px; } .review-block-rate{ font-size:13px; margin-bottom:15px; } .review-block-title{ font-size:15px; font-weight:700; margin-bottom:10px; } .review-block-description{ font-size:13px; }

Related: See More


Questions / Comments: