Bootstrap Snippet Responsive List groups for ratings using HTML CSS Bootstrap

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">
          <div class="list-group-item">
                <div class="media col-md-3">
                    <figure>
                        <time>
                            <span class="day">8</span>
                            <span class="month">Jul</span>
                            <span class="year">2014</span>
                            <span class="time">12:00 AM</span>
                        </time>
                    </figure>
                </div>
                <div class="col-md-6">
                    <h3 class="list-group-item-heading tipster"> <strong>Quiconj Nuñez</strong> </h3>
                    <p class="list-group-item-text"> Tipo: <span class = "dato">Simple </span></p>
                    <p class="list-group-item-text"> Partido: <span class = "dato">At. Madrid - Barcelona </span></p>
                    <p class="list-group-item-text"> Pick: <span class = "dato">Ganador Barcelona </span></p>
                    <p class="list-group-item-text"> Deporte: <span class = "dato">Futbol </span></p>
                    <p class="list-group-item-text"> Liga: <span class = "dato">Liga BBVA </span></p>
                    <p class="list-group-item-text"> Hora: <span class = "dato">22:00 </span></p>
                </div>
                <div class="col-md-3 text-center stats">
                    <p><span class="glyphicon glyphicon-usd dato"></span> Cuota: 1.80</p>
                    <p><span class="glyphicon glyphicon-globe dato"></span> Stake: 2 / 10 </p>
                </div>
                <div class = "estado pendiente">
                    <h3>Pendiente</h3>
                </div>
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
div.list-group-item {
    height:auto;
    min-height:220px;
}
.list-group {
    color:#0A0A0A;
    color:#fff;    
}
.list-group-item{
    background-color: rgb(102, 102, 102);
    margin-bottom: 50px;
}
.stats {
    padding-top: 7%;
}
.estado{
    width: 100%;
    height: 35px;
    float: right;
}
.estado h3{
    margin: 0;
    padding: 5px;
    color: #fff;
    text-align: center;
}
.acertada{
    background-image: -webkit-linear-gradient(rgb(107, 187, 75) 0%, rgb(20, 84, 6) 100%);
    background-image: linear-gradient(rgb(107, 187, 75) 0%, rgb(20, 84, 6) 100%);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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