"incjkbjjck"
Bootstrap 4.0.0 Snippet by ravic9089

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <style> body{ background-color:#ccc; } .body-sec{ background-color:#fff; padding:15px 10px; margin:0px 0px; } .bg-items { background: #515151; color: #FFFFFF; padding: 8px; } .table tr td{ font-size: 16px; color: #313131; font-weight: 600; } .table tr th{ text-align:center;background: #515151; color:#fff; padding: 8px; } </style> </head> <body> <div class="container"> <div class="row "> <script type="text/javascript"> var textBox = document.getElementById("foo"); textBox.onfocus = function () { textBox.select(); // Work around Chrome's little problem textBox.onmouseup = function () { // Prevent further mouseup intervention textBox.onmouseup = null; return false; }; }; </script> <div class="col-sm-8 mt-2"> <a data-toggle="modal" data-target="#myModal_lg" href="" title="" class="btn btn-sm btn-primary"> <i class="fa fa-pencil text-white"></i> Add Items</a> <div class="btn-group"> <button class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Convert to <span class="caret"></span></button> <ul class="dropdown-menu animated zoomIn"> <li> <a data-toggle="modal" data-target="#myModal_large" href="" title="Invoice">Invoice</a> </li> </ul> </div> <div class="btn-group"> <button class="btn btn-sm btn-dark dropdown-toggle" data-toggle="dropdown"> More Actions <span class="caret"></span></button> <ul class="dropdown-menu animated zoomIn"> <li> <a href="" data-toggle="ajaxModal">Email Proposal</a></li> <li> <a href="">Proposal History</a> </li> </ul> </div> </div> <div class="col-sm-4 mt-2 pull-right"> <a href="" data-toggle="tooltip" data-placement="top" title="Send Email" class="btn btn-sm btn-primary float-right" > <i class="fa fa-envelope-o"></i> </a> <a onclick="print_proposals('print_proposals')" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Print" class="mr-sm btn btn-sm btn-danger float-right"> <i class="fa fa-print"></i> </a> <a href="" data-toggle="tooltip" data-placement="top" title="" data-original-title="PDF" class="btn btn-sm btn-success float-right mr-sm"> <i class="fa fa-file-pdf-o"></i> </a> </div> </div> <div class="body-sec mt-2"> <div class="panel"> <!-- info row --> <div class="panel-body"> <div class="row"> <div class="col-lg-6 col-12"> <img class="pl-lg" style="width: 200px;height: 100px;" src="https://project.primacyinfotech.com/cube-web/portal/uploads/logo.png"> </div> <div class="col-lg-6 col-12 "> <div class="flaot-left float-sm-right pr-lg"> <h5 class="mb0">Proposals : CTPRO-0030</h5> Proposals date: 05.28.2020<br>Due Date: 05.31.2020<br>Sales Agent:Cube Theory <br>Proposals Status: <button class="btn btn-danger btn-sm">Sent</mt-5> </div> </div> </div> <div class="row mb-lg"> <div class="col-lg-6 col-12 mt-2"> <h5 class="p-md bg-items mr-15"> Our Info: </h5> <div class="pl-sm"> <h4 class="mb0">Cube Theory</h4> ABCD<br>Arizona, 0000<br>United States of America <br>Phone : 6024487880<br>Vat Number : </div> </div> <div class="col-lg-6 col-12 mt-2"> <h5 class="p-md bg-items ml-13"> Customer Info: </h5> <div class="pl-sm"> <h4 class="mb0">mr x</h4> BF 79, Sector 1, Salt Lake<br> Kolkata,<br>India<br>Phone: 9088015865 </div> </div> </div> <div class="table-responsive mb-lg " style="margin-top: 25px"> <table class="table" style="width:100%"> <thead> <tr> <th>#</th> <th>Items</th> <th>Qty</th> <th>Price</th> <th>Tax</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td><center>1</center></td><td><center>dsdfdfsfdsfds</center></td><td><center>11</center></td><td><center>600</center> </td><td><center>1.0</center></td><td><center>2500.00</center></td> </tr> <tr> <td><center>2</center></td><td><center>dsdfdfsfdsfds</center></td><td><center>11</center></td><td><center>600</center> </td><td><center>1.0</center></td><td><center>2500.00</center></td> </tr> <tr> <td><center>3</center></td><td><center>dsdfdfsfdsfds</center></td><td><center>11</center></td><td><center>600</center> </td><td><center>1.0</center></td><td><center>2500.00</center></td> </tr> </tbody> </table> </div> <div class="row" style="margin-top: 35px"> <div class="col-12 col-md-8"> <p class="well well-sm mt"> Hey Looking forward in doing business with you. </p> </div> <div class="col-12 col-md-4 pv"> <div class="clearfix"> <p class="float-left">Sub Total</p> <p class="float-right mr"> 5,150.00 </p> </div> <div class="clearfix"> <p class="float-left">Discount(10%)</p> <p class="float-right mr"> 515.00 </p> </div> <div class="clearfix"> <p class="float-left">GST 5 (5.00 %)</p> <p class="float-right mr"> 231.75 </p> </div> <div class="clearfix"> <p class="float-left">Total Tax</p> <p class="float-right mr"> 231.75 </p> </div> <div class="clearfix"> <p class="float-left">Adjustment</p> <p class="float-right mr"> 10.00 </p> </div> <div class="clearfix"> <p class="float-left">Total</p> <p class="float-right mr"> Rs 4,876.75 </p> </div> </div> </div> </div> </div> <br/> </div> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html>

Related: See More

Vue Light Bootstrap Dashboard PRO

Questions / Comments: