Bootstrap Snippet invoooo poso using HTML

"invoooo poso"
Bootstrap 4.1.1 Snippet by ravic9089

4.1.1

571 0 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html> <html lang="en"> <head> <title>Thermal Print</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #invoice-POS { box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); padding:.5mm; margin: 0 auto; width: 79mm; background: #FFF; } #invoice-POS ::selection { background: #f31544; color: #FFF; } #invoice-POS ::moz-selection { background: #f31544; color: #FFF; } #invoice-POS h1 { font-size: 1.5em; color: #222; } #invoice-POS h2 { font-size: 0.9em; } #invoice-POS h3 { font-size: 1.2em; font-weight: 300; line-height: 2em; } #invoice-POS p { font-size: 0.7em; text-align: center; color: #666; line-height: 1.2em; font-weight: 600; margin: 2px 0px; text-transform: uppercase; } /* #invoice-POS #top, #invoice-POS #mid, #invoice-POS #bot { border-bottom: 1px solid #EEE; } #invoice-POS #top { min-height: 100px; } */ #invoice-POS #mid { font-weight: 500; min-height: 50px; text-align: center; font-size: 18px; } #invoice-POS #bot { min-height: 50px; padding: 8px 11px; } #invoice-POS #top .logo { height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/logo1.png) no-repeat; background-size: 60px 60px; } #invoice-POS .clientlogo { float: left; height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/client.jpg) no-repeat; background-size: 60px 60px; border-radius: 50px; } #invoice-POS .info { display: block; margin-left: 0; margin-top: 15px; } #invoice-POS .title { float: right; } #invoice-POS .title p { text-align: right; } #invoice-POS table { width: 100%; border-collapse: collapse; } #invoice-POS .tabletitle { font-size: 0.6em; background: #EEE; font-weight: 600; } #invoice-POS .service { border-bottom: 0px solid #EEE; } #invoice-POS .item { width: 40mm; } #invoice-POS .Hours { width:3mm; text-align: right; } #invoice-POS .Hours2 { /* width: 10mm;*/ text-align: right; } #invoice-POS .Hours3 { /* width: 10mm;*/ text-align: right; } #invoice-POS .Rate { width: 10mm; text-align:right; } #invoice-POS .itemtext { font-size: 0.6em; text-align:right; } #invoice-POS .itemtext2 { font-size: 0.6em; text-align: left; /*width: 89px; position: absolute; margin-top: -4px;*/ } #invoice-POS #legalcopy { margin-top: 5mm; } </style> </head> <body> <br/> <center><button class="btn btn-info pull-right print" id="print_proposals2">Print</button> </center> <div id="print_proposals"> <div id="invoice-POS">  <div id="mid"> <div class="info"> <b>demo</b> <p> demo</br> Tel No:+demo</br> Email:demo</br> Billed To:demo / demo</br> Delivery Todemo , demo , demo , demo , demo</br>  </p> <br/> </div> </div> <div id="bot"> <div id="table"> <table> <tr class="tabletitle"> <td class="item">ITEM DESC</td> <td><div class="Hours"> QTY</div></td> <td><div class="Hours2"> DISC AMT</div></td> <td><div class="Hours3"> NET AMT</div></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Oral-B Pro-Health Toothbrush, 1 piece<br/>( 1pc )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">5</p></td> <td class="tableitem"><p class="itemtext">55</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Odonil Zipper Air Freshener Alluring Daffodil 10 g<br/>( 10g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">0</p></td> <td class="tableitem"><p class="itemtext">55</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Domex Lime Fresh Toilet Cleaner - 500ml<br/>( 500ml )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">0</p></td> <td class="tableitem"><p class="itemtext">87</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Sabudana/sago Rajmoti 1kg (sago)<br/>( 1kg )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">25</p></td> <td class="tableitem"><p class="itemtext">75</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Samrat Besan<br/>( 500g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">15</p></td> <td class="tableitem"><p class="itemtext">49</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">poha (swastik) 1kg (pohe)<br/>( 1kg )</p></td> <td class="tableitem"><p class="itemtext">2</p></td> <td class="tableitem"><p class="itemtext">15</p></td> <td class="tableitem"><p class="itemtext">55</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Immunity Booster smart balance oil +Free 1 Pouch - Haldi Powder<br/>( 1L )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">5</p></td> <td class="tableitem"><p class="itemtext">155</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Emami Sunflower Oil, 1 L Pouch<br/>( 1L )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">5</p></td> <td class="tableitem"><p class="itemtext">175</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Pack of 2 - lays spanish tomato & kurkure naughty tomato<br/>( 52g + 90g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">0</p></td> <td class="tableitem"><p class="itemtext">40</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">lays pack of 2 - American Style Cream & Onion<br/>( 52g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">0</p></td> <td class="tableitem"><p class="itemtext">40</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Doritos Nacho Cheese Flavored Tortilla Chips (family Pack)<br/>( 187g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">2</p></td> <td class="tableitem"><p class="itemtext">83</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Doritos sweet chilli (family pack)<br/>( 187g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">2</p></td> <td class="tableitem"><p class="itemtext">83</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">lays - American Style Cream & Onion (family pack)<br/>( 130g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">0</p></td> <td class="tableitem"><p class="itemtext">50</p></td> </tr> <tr class="service"> <td class="tableitem"><p class="itemtext2">Lays Hot and Sweet<br/>( 52g )</p></td> <td class="tableitem"><p class="itemtext">1</p></td> <td class="tableitem"><p class="itemtext">0</p></td> <td class="tableitem"><p class="itemtext">20</p></td> </tr>   <tr class="tabletitle"> <td colspan="4"><div style="text-align:right"><b>Total Rs 1077</b></div></td> </tr>  </table> </div> <div id="legalcopy"> <p class="legal"><strong>Thank you for your Payment!</strong> </p> </div> </div> </div> </div> <script type="text/javascript"> document.getElementById("print_proposals2").addEventListener("click", function() { var printContents = document.getElementById('print_proposals').innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; }); </script> </body> </html>

Related: See More

BLKâ€¢ Design System

BLKâ€¢ Design System

Questions / Comments:

Posting GuidelinesFormatting