Bootstrap Snippet Product grid 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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="product-list">
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <div class="white-box">
            <div class="wishlist-icon">
              <a href="javascript:void(0);"><img src="https://pngimage.net/wp-content/uploads/2018/06/wishlist-icon-png-3.png" /></a>
            </div>
            <div class="product-img">
              <img src="https://www.91-img.com/pictures/laptops/asus/asus-x552cl-sx019d-core-i3-3rd-gen-4-gb-500-gb-dos-1-gb-61721-large-1.jpg">
            </div>
            <div class="product-bottom">
              <div class="product-name">Asus X552CL-SX019D Laptop</div>
              <div class="price">
                <span class="rupee-icon">₹</span> 32,000 
              </div>
              <a href="#" class="blue-btn">Add to cart</a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="white-box">
            <div class="wishlist-icon">
              <a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a>
            </div>
            <div class="product-img">
              <img src="https://images-na.ssl-images-amazon.com/images/I/81nreGN5qQL._SL1500_.jpg">
            </div>
            <div class="product-bottom">
              <div class="product-name">ASUS X507 Core i5 - 8th Gen 15.6"</div>
              <div class="price">
                <span class="rupee-icon">₹</span> 30,000 
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('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap');
.product-list {
    padding: 20px 10px 20px;
    font-family: 'Nunito Sans', sans-serif;
}
.product-list>ul {
    margin: 0 -10px;
    padding: 0;
    list-style: none;
    display: flex;
}
.product-list>ul>li {
    width: 25%;
    padding: 10px;
}
.white-box {
    border-radius: 5px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
    background-color: #ffffff;
    padding: 35px 20px;
    transition: all 0.5s ease-in-out;
    position: relative;
}
.wishlist-icon {
    position: absolute;
    right: 12px;
    top: 10px;
}
.wishlist-icon img {
    width: 20px;
    height: 20px;
}
.product-img {
    min-height: 135px;
}
.product-img img {
    max-width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Product grid view"
Bootstrap 4.1.1 Snippet by MPJJ

Related: See More

Questions / Comments:

"Product grid view" Bootstrap 4.1.1 Snippet by MPJJ

Related: See More

Questions / Comments:

"Product grid view"
Bootstrap 4.1.1 Snippet by MPJJ