Bootstrap Snippet Product Shopping Grid Styles or Product Card BS4 Responsive Simple and Attractive by Er. Om Nath 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 ---------->
    <!--Please don't use class container for below programe. Because i designes it as it is.-->
    <!--The body size is fixed which is just bigger then container.-->
    <!--If you are using Container the make changes in css file (pro-box{width:100%;})-->
    <!--for any help ping me on https://www.facebook.com/er.omnath or on https://www.instagram.com/er.omnath-->
    <!--For More Visit https://www.youtube.com/engineerons -->
    <section class="pro-box mt-4 mb-4"> <!--Remove mt-4 if u don't want space in above and remove mb-4 if u dont want space below-->
        <div class="form-inline p-3">
            <div class="col-md-10 col-9">
                <h4>Shop by Bestselling Products (By <a href="https://www.facebook.com/er.omnath">Er. Om Nath</a>)</h4>
            </div>
            <div class="col-md-2 col-3 text-right">
                <a href="shop?cat=1" target='_blank' class="btn btn-success">View all</a>
            </div>
        </div>
        <div class="row product-grid p-2">
            
            <div class=" border rounded product-card mb-3 p-2">
                <div class="pro-img">
                    <a href="">
                      <img style="width: 100%;" class="rounded" src="https://www.boffobear.com/admin_area/product_images/old-cake%2067.jpg">
                    </a>
                </div>
                <div>
                    <div>
                      <span style="font-size: 12px; color: green;" class="text-center">ID: #123</span>
                    </div>
                    <div>
                      <label style="font-size: 14px;"><strong style="color: #057d09; ">Product Titile</strong></label>
                    </div>
                    <div style="color: green;">Price: <strong>₹432</strong></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
/*Product Card*/
/*Remove body if you don't want body background color*/
body{ 
    background-color:#ebebeb;
}
.pro-box{
    background-color: #fff;
    border-radius:8px;
    width: 96%;
    margin: auto;
}
.product-grid{
    width: 100%;
    margin: auto;
}
.product-card{
    width: 200px !important;
    border: 10px green;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
    width: 95%;
    margin: auto;
}
.product-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.product-card label::first-letter{
    text-transform: uppercase;
}
.pro-img img{
    transition: 1s;
    cursor: pointer;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Product Shopping Grid Styles or Product Card BS4 Responsive Simple and Attractive by Er. Om Nath"
Bootstrap 4.1.1 Snippet by omnath

Related: See More

Questions / Comments:

"Product Shopping Grid Styles or Product Card BS4 Responsive Simple and Attractive by Er. Om Nath" Bootstrap 4.1.1 Snippet by omnath

Related: See More

Questions / Comments:

"Product Shopping Grid Styles or Product Card BS4 Responsive Simple and Attractive by Er. Om Nath"
Bootstrap 4.1.1 Snippet by omnath