Bootstrap Snippet Product List View 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="//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 ---------->
<div class="col-md-3">
<ul class="widget-products">
                  <li>
                     <a href="#">
                     <span class="img">
                     <img class="img-thumbnail" src="http://lorempixel.com/400/400/food/1/" alt="">
                     </span>
                     <span class="product clearfix">
                     <span class="name">
                     Product name 1
                     </span>
                     <span class="price">
                     <i class="fa fa-money"></i> $320,00
                     </span>
                     </span>
                     </a>
                  </li>
                  <li>
                     <a href="#">
                     <span class="img">
                     <img class="img-thumbnail" src="http://lorempixel.com/400/400/food/2/"  alt="">
                     </span>
                     <span class="product clearfix">
                     <span class="name">
                     Product name 2
                     </span>
                     <span class="price">
                     <i class="fa fa-money"></i> $273,68
                     </span>
                     </span>
                     </a>
                  </li>
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
.widget-products li>a:after {
    content: "\f138";
    font-family: FontAwesome;
    font-size: 0.875em;
    font-style: normal;
    font-weight: normal;
    margin-top: 32px;
    position: absolute;
    right: 10px;
    text-decoration: inherit;
    top: 0;
    color: #cccccc;
    font-size: 1.3em;
}
.btn-success {
    background-color: #2ecc71;
    border-color: #27ae60;
}
.btn {
    border: none;
    padding: 6px 12px;
    border-bottom: 4px solid;
    -webkit-transition: border-color 0.1s ease-in-out 0s,background-color 0.1s ease-in-out 0s;
    transition: border-color 0.1s ease-in-out 0s,background-color 0.1s ease-in-out 0s;
    outline: none;
}
.checkbox-nice label {
    padding-top: 3px;
}
label {
    font-weight: 400;
    font-size: 0.875em;
}
.checkbox-nice input[type=checkbox] {
    visibility: hidden;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Product List View"
Bootstrap 3.3.0 Snippet by imjaypatel

Related: See More

Questions / Comments:

"Product List View" Bootstrap 3.3.0 Snippet by imjaypatel

Related: See More

Questions / Comments:

"Product List View"
Bootstrap 3.3.0 Snippet by imjaypatel