Bootstrap Snippet Product Area using HTML CSS Bootstrap Javascript

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
<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="product-area">
<div class="container">
    <div class="row text-center">
        <div class="col-md-3">
              <div class="product-box">
                <div class="product-img">
                    <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1">
                </div>
                <div class="product-name">
                    <a href=""><h4>Finexpert Financial Advisor</h4></a>
                    <a href=""><h6>HTML</h6></a>
                </div>
                <div class="product-lists">
                    <ul class="list-inline">
                        <li><a href="#">Free</a></li>
                        <li><a href="#">Request Download</a></li>
                       
                    </ul>
                </div>   
              </div>
         </div>
    </div>
        
            
        
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
.product-box {border:1px solid #e2e2e2; padding:10px; min-height:200px; }
.product-box:hover {box-shadow: 1px 4px 4px rgba(0, 0, 0, .5);transition: all .2s;}
.product-img img {width:100%;border-radius: 8px;opacity: 0.7;}
.product-img img:hover {opacity: 1.0;}
.product-name a {color:#000}
.product-name a:hover {}
.product-lists ul li a {font-size:16px;color:#dd000;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
<div class="product-button">
                    <button type="button" class="btn btn-primary site-btn">Primary</button>
                    <button type="button" class="btn btn-primary site-btn">Primary</button>
                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Product Area"
Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"Product Area" Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"Product Area"
Bootstrap 3.3.0 Snippet by jeevan123456