"Customer review bar"
Bootstrap 3.0.0 Snippet by ariunbolor

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <div class="row"> <div class="col-sm-1 logo-holder" style="text-align: right;"> <img src="https://static1.squarespace.com/static/55a7fbebe4b03ff484b9aaeb/56282c40e4b0629aedba3232/56282c42e4b0377cf5388bd3/1445473380326/greendental-03.png" width="70"> </div> <div class="col-sm-2"> <div> <h5 class="bold padding-bottom-3">4.3 <small>/ 5</small></h5> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> </div> <div class="col-sm-1 logo-holder" style="text-align: right;"> <img src="http://www.tuskeshomes.com/images/uploaded/272400505840778_houzz_circle_logo.png" width="60"> </div> <div class="col-sm-2"> <div> <h5 class="bold padding-bottom-3">4.3 <small>/ 5</small></h5> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> </div> <div class="col-sm-1 logo-holder" style="text-align: right;"> <img src="https://static1.squarespace.com/static/55a7fbebe4b03ff484b9aaeb/56282c40e4b0629aedba3232/56282c42e4b0377cf5388bd3/1445473380326/greendental-03.png" width="70"> </div> <div class="col-sm-2"> <div> <h5 class="bold padding-bottom-3">4.3 <small>/ 5</small></h5> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> </div> <div class="col-sm-1 logo-holder" style="text-align: right;"> <img src="https://static1.squarespace.com/static/55a7fbebe4b03ff484b9aaeb/56282c40e4b0629aedba3232/56282c42e4b0377cf5388bd3/1445473380326/greendental-03.png" width="70"> </div> <div class="col-sm-2"> <div> <h5 class="bold padding-bottom-3">4.3 <small>/ 5</small></h5> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button> </div> </div> </div> </div>
.logo-holder { width: 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: