"Store product layout"
Bootstrap 3.2.0 Snippet by briandiaz

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.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-md-12">
<div class="col-sm-6 col-md-4">
<div class="thumbnail" >
<h4 class="text-center"><span class="label label-info">Samsung</span></h4>
<img src="http://placehold.it/650x450&text=Galaxy S5" class="img-responsive">
<div class="caption">
<div class="row">
<div class="col-md-6 col-xs-6">
<h3>Galaxy S5</h3>
</div>
<div class="col-md-6 col-xs-6 price">
<h3>
<label>$649.99</label></h3>
</div>
</div>
<p>32GB, 2GB Ram, 1080HD, 5.1 inches, Android</p>
<div class="row">
<div class="col-md-6">
<a class="btn btn-primary btn-product"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a>
</div>
<div class="col-md-6">
<a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a></div>
</div>
<p> </p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail" >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
.btn-product{
width: 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

is there a way to make that like button work?
i mean count number of likes

mollel () - 9 years ago - Reply 0


How can i minimize that image,

freddy () - 9 years ago - Reply 0