"Customer review bar"
Bootstrap 3.0.0 Snippet by ariunbolor

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons
Expanding review and rating box

Questions / Comments: