"html invoicee"
Bootstrap 4.1.1 Snippet by ravic9089

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> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Invoice</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{ padding:0px; margin:0px; } .container{ width:1200px; padding:20px 120px; margin:0 auto; overflow-x:auto; overflow-y:auto; } .hr-col { border: 1px solid #000; border-radius: 1px; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } .logo{ float:left; width:35%; } .logo img{ width;100%; height:80px; } .address{ float:left; width:35%; } .member{ float:left; width:30%; } .clear{ clear:both; } .btn{ background:#ccc; padding:10px 18px; font-size:16px; font-weight:700; color:#000; } table tr td h3{ font-size:17px; } table tr td h4 { font-size: 16px; color: #313131; font-weight: 550; } .datarow tr td{ font-size: 16px; color: #313131; font-weight: 600; } .datarow tr th{ text-align:center; } @media print { #printPageButton { display: none; } .container{ padding:60px 40px; } } </style> </head> <body> <div class="container"> <center> <button type="button" class="btn" id="printPageButton" class="btn btn-primary btn-md" onclick="printThis()" >Print</button> </center> <br/><br/><br/> <div class="clear"></div> <div class="logo"><img src="http://partner.relaxindia.org/work/includes/img/logo.png" alt="logo"></div> <div class="address"> <h3><b>Relaxindia</b><br/></h3> 147, Ramkrishna Rd, Italgacha<br/> Motilal Colony,Rajbari, Dum Dum<br/> Kolkata, West Bengal 700079<br/> <b>Phone: 084484 40506<br/> <b>Website: www.relaxindia.org</b> </div> <div class="member"> <table style="width:100%"> <tr> <td><h3>Member ID</h3></td><td><h4>AB568VH90</h4></td> </tr> <tr> <td><h3>Name</h3></td><td><h4>Suman Sardar</h4></td> </tr> <tr> <td><h3>Period</h3></td><td><h4>17-04-2020 to 24-04-2020</h4></td> </tr> <tr> <td><h3>Status</h3></td><td><h4>Sales</h4></td> </tr> </table> </div> <div class="clear"></div> <br/> <hr class="hr-col"> <br/> <h3><b>Member Details</b></h3> <table style="width:100%"> <tr> <td><h3>Member ID</h3></td><td><h4>AB568VH90</h4></td> <td><h3>Name</h3></td><td colspan="3" ><h4>Suman Sardar</h4></td> </tr> <tr> <td><h3>Age/Gender</h3></td><td><h4>Male</h4></td><td><h3>Contact</h3></td><td><h4>9874582089</h4></td><td><h3>Household</h3></td><td width="150px"></td> </tr> <tr> <td><h3>Email</h3></td><td colspan="5"><h4>piwd0032@primacyinfotech.com</h4></td> </tr> <tr> <td><h3>Address</h3></td><td colspan="5"><h4>salt lake, kolkata</h4></td> </tr> </table> <br/> <center><h3><b>Account Statement for the Period :17-04-2020 to 24-04-2020</b></h3></center> <table style="width:100%"> <tr> <td><h3>Opening Balance(A)</h3></td><td><h3>Orders Placed(B)</h3></td><td width="200"><h3>Payment Realized(C)</h3></td><td><h3>Closing Balance(A+B+C)</h3></td><td><h3>Amount In Clearing</h3></td><td><h3>Amount Due</h3></td> </tr> <tr> <td><h4 style="float:right">0.0</h4></td><td><h4 style="float:right">446464464.00</h4></td><td><h4 style="float:right">66665555.00</h4></td><td><h4 style="float:right">7894561230</h4></td><td><h4 style="float:right">65665656.00</h4></td><td><h4 style="float:right">6566366.00</h4></td> </tr> <tr> <td rowspan="0" colspan="3" width="180"><h3>Edfdsfdsfdsfds vdsfdsf sdfdsfdsf sdfdsfdsf sddfdsfdsfdsf sfdfmail jgjg jhhjghjghg jhghghjghgh</h3></td><td colspan="2"><h3 style="float:right">Min Balance To Be Maintained</h3></td><td><h4 style="float:right">545445</h4></td> </tr> <tr> <td colspan="2"><h3 style="float:right">Total payable Now</h3></td><td><h4 style="float:right">6456645.55</h4></td> </tr> </table> <br/> <h3><b>Details Of Orders Placed</b></h3> <table class="datarow" style="width:100%"> <thead> <tr> <th>SI No</th> <th>ID</th> <th>Date</th> <th>Particulars</th> <th>Qty</th> <th>Net Amount Payable</th> </tr> </thead> <tbody> <tr> <td><center>1</center></td><td><center>14646464</center></td><td><center>03-01-20202</center></td><td>dhfhdh sajgdjgsajhdh asgdjhsdjhsad sajdgjsajdsddjhadgd <br/>jkddhgjdshdjkshdj</td><td><center>1.0</center></td><td><center>2500.00</center></td> </tr> </tbody> </table> </div> <br/><br/> <script> function printThis() { window.print(); } </script> </body> </html>

Related: See More

Material Bootstrap Wizard

Questions / Comments: