"E commerce Mobile Category Bootstrap Grid "
Bootstrap 3.0.0 Snippet by Anita26

Post to Facebook Tweet this

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!-- mobile showcase -->
<div class="space-medium">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="showcase-block">
<div class="display-logo ">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/nexus.png" alt=""></a>
</div>
<div class="showcase-img">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_1.png" alt=""></a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="showcase-block active">
<div class="display-logo alignleft">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/iphone.png" alt="">
</a>
</div>
<div class="showcase-img">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_2.png" alt="" style="padding-left: 80px;"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="showcase-block ">
<div class="display-logo ">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/samsung.png" alt="">
</a>
</div>
<div class="showcase-img">
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
/*----------------------------------
1. Body / Typography
----------------------------------*/
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 0px; font-size: 16px; color: #848687; font-weight: 400; line-height: 30px; background-color: #f3f5f7; }
h1, h2, h3, h4, h5, h6 { color: #1c1e1e; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'Roboto Condensed', sans-serif; }
h1 { font-size: 30px; line-height: 42px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font-size: 22px; line-height: 30px; }
h4 { font-size: 18px; line-height: 26px; }
h5 { font-size: 14px; font-weight: 400; }
h6 { font-size: 12px; font-weight: 400; }
p { margin: 0 0 24px; line-height: 1.8; }
p:last-child { margin: 0px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: #1c1e1e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #fb730f; }
.alignright { float: right; margin: 0px 0 20px 30px; }
.alignleft { float: left; margin: 0px 20px 0px 0; }
.showcase-block { margin-bottom: 30px; min-height: 300px; background-color: #e8eaec; padding: 30px 30px 0px 30px; text-align: center; }
.showcase-img { padding-top: 18px; }
.display-logo { margin-bottom: 30px; }
.showcase-block:hover { background-color: #fff; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); }
.showcase-block.active { background-color: #fff; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard
BS4 Login, Register FORM + Mobile
Portfolio Gallery with filtering category
Mobile Nav Bar

Questions / Comments: