"Responsive List groups for ratings "
Bootstrap 3.1.0 Snippet by mgustin12

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="well">
<h1 class="text-center">Vote for your favorite</h1>
<div class="list-group">
<a href="#" class="list-group-item active">
<div class="media col-md-3">
<figure class="pull-left">
<img class="media-object img-rounded img-responsive" src="http://placehold.it/350x250" alt="placehold.it/350x250" >
</figure>
</div>
<div class="col-md-6">
<h4 class="list-group-item-heading"> List group heading </h4>
<p class="list-group-item-text"> Qui diam libris ei, vidisse incorrupte at mel. His euismod salutandi dissentiunt eu. Habeo offendit ea mea. Nostro blandit sea ea, viris timeam molestiae an has. At nisl platonem eum.
Vel et nonumy gubergren, ad has tota facilis probatus. Ea legere legimus tibique cum, sale tantas vim ea, eu vivendo expetendis vim. Voluptua vituperatoribus et mel, ius no elitr deserunt mediocrem. Mea facilisi torquatos ad.
</p>
</div>
<div class="col-md-3 text-center">
<h2> 14240 <small> votes </small></h2>
<button type="button" class="btn btn-default btn-lg btn-block"> Vote Now! </button>
<div class="stars">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p> Average 4.5 <small> / </small> 5 </p>
</div>
</a>
<a href="#" class="list-group-item">
<div class="media col-md-3">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
a.list-group-item {
height:auto;
min-height:220px;
}
a.list-group-item.active small {
color:#fff;
}
.stars {
margin:20px auto 1px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: