Bootstrap Snippet history in pc 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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="container">
    <div class="row">
        
            <div class="col-md-7">
                <div class="history_wrapper">
                    
                    <div class="history_header">
                        <div class="history_header_product">
                            Product
                        </div> 
                         <div class="history_header_quantity">
                            Quantity
                        </div>   
                         <div class="history_header_size">
                            Size
                        </div>  
                         <div class="history_header_date">
                            Date
                        </div>    
                    </div>
                    
                    
                      <div class="history_body">
                            <div class="history_list">
                                <div class="history_item_name">
                                   <span class="item_name"> DESIGNER SAREES 001 </span>
                               
                                   <span class="item_name"> DESIGNER SAREES 001 </span>
                             
                                   <span class="item_name"> DESIGNER SAREES 001 </span>
                                </div>
                                 <div class="history_item_quantity">
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
.history_wrapper{float:left; width:100%; display:block; box-shadow:0 0 5px #aaa;}
.history_header,.history_body{float:left; width:100%;}
.history_list{float:left; width:100%; border-top:1px solid rgba(0,0,0,0.3);border-bottom:1px solid rgba(0,0,0,0.3); padding:0px 5px;}
.history_header .history_header_product{float:left; width:40%; padding:0 10px; font-size:20px; text-align:left; }
.history_header .history_header_quantity{float:left; width:20%; padding:0 10px; font-size:20px; text-align:left; }
.history_header .history_header_size{float:left; width:20%; padding:0 10px; font-size:20px; text-align:left; }
.history_header .history_header_date{float:left; width:20%; padding:0 10px; font-size:20px; text-align:left; }
.history_item_name{text-align:left; width:40%; float:left;}
.history_item_name span.item_name{float:left; width:100%; padding:10px 0px;}
.history_item_quantity,.history_item_size{float:left; width:20%;}
.history_item_quantity span.item_quantity,.history_item_size span.item_size{ text-align:center; padding:10px 0; float:left; width:100%;}
.history_item_date{float:left; width:20%;}
.history_item_date span.item_date{float:left; width:100%;}
.history_list_footer{float:left; width:100%;border-top:1px solid rgba(0,0,0,0.2); padding:10px 0px;}
.history_list_footer .label{float:left;}
.histroy date{float:left; font-weight:600;}
.histroy_total{float:right;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"history in pc view"
Bootstrap 3.0.0 Snippet by devlopereswar

Related: See More

Questions / Comments:

"history in pc view" Bootstrap 3.0.0 Snippet by devlopereswar

Related: See More

Questions / Comments:

"history in pc view"
Bootstrap 3.0.0 Snippet by devlopereswar