"Category List cards - E-commerce website - Product category listing bootstrap 4 cards"
Bootstrap 4.0.0 Snippet by shivangi08

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="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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">
<h2>Categories</h2>
<div class="row">
<div class="col-md-6">
<div class="category-list-card">
<div class="category-image">
<img src="http://crushlobby.com/bootsnipp_img/vege.png">
</div>
<div class="category-name">
<h3>Fruits & Vegetables</h3>
<p>Fruit & Vegetable Baskets, Fruits, Vegetables, Cut Fresh & Herbs, Mangoes</p>
</div>
<div class="right-arrow-div">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
<div class="col-md-6">
<div class="category-list-card">
<div class="category-image">
<img src="http://crushlobby.com/bootsnipp_img/grocery.png">
</div>
<div class="category-name">
<h3>Grocery & Staples</h3>
<p>Pulses, Atta & Other Flours, Rice & Other Grains, Dry Fruits & Nuts, Edible Oils, Ghee & Vanaspati, Spices, Salt & Sugar, Organic Staples</p>
</div>
<div class="right-arrow-div">
<i class="fa fa-angle-right"></i>
</div>
</div>
</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
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
body{
font-family: 'PT Sans', sans-serif;
color:#666;
}
p{font-size:13px;}
.category-list-card{
background-color: #fff;
border-radius: 3px;
border: 1px solid #eee;
cursor: pointer;
display: block;
margin: 5px 15px;
padding: 8px 0;
}
.category-image{
display: inline-block;
text-align: center;
height: 160px;
vertical-align: top;
width: 208px;
margin-right:15px;
}
.category-name{
display: inline-block;
margin-left: 10px;
font-size: 18px;
margin-top: 42px;
width: 49%;
}
.right-arrow-div{
float:right;
margin-right:10px;
margin-top:70px;
font-size:20px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
Bootstrap 4 and CCS3 Product Cards with Transition
Information Cards
Responsive Data Cards (Bootstrap 4)

Questions / Comments: