"lista de produtos"
Bootstrap 3.3.0 Snippet by lucasdu4rte

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="panel panel-default panel-product">
<div class="panel-body">
<a href="#">
<img src="https://novaagro.com.br/admin/uploads/image/pinos-jpg-2.jpg" alt="" class="img-responsive center-block" />
</a>
</div>
<div class="panel-footer">
<h5>The company</h5>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="panel panel-default panel-product">
<div class="panel-body">
<a href="#">
<img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
</a>
</div>
<div class="panel-footer">
<h5>The company</h5>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="panel panel-default panel-product">
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
html, body {
background: #f1f1f1;
}
.container {
margin-top: 10px;
background: #f1f1f1;
}
.panel.panel-product {
border: none;
/*height: 300px;*/
/*box-shadow: 0 0 1.25rem 0 rgba(0,0,0,0.15);*/
}
.panel.panel-product:hover {
box-shadow: 0 0 1.25rem 0 rgba(0,0,0,0.15);
}
.panel-product > .panel-body {
/*padding: 0px;*/
}
.panel-product > .panel-body > a >img {
/*width: 100%;*/
height: 300px;
}
.panel-product > .panel-footer {
text-align: center;
background: #FFF;
border: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: