Bootstrap Snippet Ecommerce Products 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/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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>
<div class="prod_page">
    <div class="container">
    <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12">
                <div class="col-md-4 col-sm-4 col-xs-12">
                     <div class="product_item_view">
                          <img src="https://s-media-cache-ak0.pinimg.com/564x/b4/12/9a/b4129abb37e4d8e2d7bd4b79e2688a59.jpg" class="img-responsive"/>
                    </div>
                 </div>
                 <!--Product Detail-->
                 <div class="col-md-8 col-sm-8 col-xs-12">
                     <div class="product_detail_view">
                          <div class="pro_heading">
                              MY NEW PRODUCT
                             
                             <span class="new_coll">
                                 New Collection 
                                 <span id="stock_available">
                                     Instock
                                 </span>
                             </span>
                              
                          </div>
                          
                          <div class="pro_rate">
                              $250
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
.prod_page{float:left; width:100%; }
.product_item_view{float:left; width:100%; margin-top:40%;}
.product_detail_view{float:left; width:100%; padding:20px; box-shadow:0 0 3px #aaa; padding:10px; margin-top:5%;}
.pro_heading{float:left;width:100%; font-size:45px; font-weight:normal;font-family: 'Allerta', sans-serif;;}
.new_coll{float:left; width:100%;font-size:18px; font-style:italic; margin:30px 0; position:relative; }
#stock_available {color:red; font-size:18px; font-weight:500; font-style:normal; text-decoration:none !important; padding:40%;}
.pro_rate{float:left;width:100%; margin:15px 0; padding-left:10%; font-size:25px; font-style:italic;}
.color_quantity{width:80%;float:left; margin-left:10%; border-top:1px solid #aaa; border-bottom:1px solid #aaa; height:70px; padding:10px;margin-bottom:30px;}
.color{width:35%; float:left;}
.color_select{float:left; width:50%; margin-left:10px;margin-top:10px;}
.color_select li{float:left; width:7%; text-align:center; padding:0 10px;}
#red{    width: 15px;
    height: 15px;
    background-color: red;
    float: left;
    border-radius: 1em;}
#green{width:15px; height:15px; background:green;   background-color: green;
    float: left;
    border-radius: 1em;}
#black{width:15px; height:15px; background:black;   background-color: black;
    float: left;
    border-radius: 1em;}
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Ecommerce Products"
Bootstrap 3.3.0 Snippet by devlopereswar

Related: See More

Questions / Comments:

"Ecommerce Products" Bootstrap 3.3.0 Snippet by devlopereswar

Related: See More

Questions / Comments:

"Ecommerce Products"
Bootstrap 3.3.0 Snippet by devlopereswar