<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 ----------> <div class="container"> <div class="row"> <div class="row col-xs-12> <div class="col-xs-8 col-xs-offset-2"> <div class="input-group col-xs-6"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">Invoice Month</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#Jjanuary">January</a></li> <li><a href="#february">February</a></li> <li><a href="#march">March</a></li> <li class="divider"></li> <li><a href="#all">Anything</a></li> </ul> </div> <input type="hidden" name="search_param" value="all" id="search_param"> <input type="text" class="form-control" name="x" placeholder="Search for customer..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </div> </div> <div class="row well"> <div class="row"> <div class="col-xs-12"> <div class="invoice-title"> <h2>Invoice</h2><h3 class="pull-right">Order # 12345</h3> </div> <hr> <div class="row"> <div class="col-xs-6"> <address> <strong>Billed To:</strong><br> John Smith<br> 1234 Main<br> Apt. 4B<br> Springfield, ST 54321 </address> </div> <div class="col-xs-6 text-right"> <address> <strong>Shipped To:</strong><br> Jane Smith<br> 1234 Main<br> Apt. 4B<br> Springfield, ST 54321 </address> </div> </div> <div class="row"> <div class="col-xs-6"> <address> <strong>Payment Method:</strong><br> Visa ending **** 4242<br> jsmith@email.com </address> </div> <div class="col-xs-6 text-right"> <address> <strong>Order Date:</strong><br> March 7, 2014<br><br> </address> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <strong>Order summary</strong> </h3> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-condensed"> <thead> <!--Grid--> <!--http://bootsnipp.com/snippets/1KmWy--> <!--<div class="container"> <div class="row"> <h2>simple GRID</h2> </div> <div class="row"> <h3 class="text-center text-primary">Persons</h3> <div class="col-md-12">--> <!--<table class="table table-hover" id="worked"> <thead>--> <tr> <th>Case Number</th> <th>Case Record Type</th> <th>AC Dealer Id</th> <th>Dealership Name</th> <th>Polling Frequency</th> <th>Monthly Fee</th> <th> <button type="button" class="btn btn-blue add-row">+</button> </th> <th>Setup Fee</th> <th> <button type="button" class="btn btn-blue add-row">+</button> </th> </tr> </thead> <tbody> <tr> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <button type="button" class="btn btn-danger delete-row">-</button> </td> <td> <input class="form-control" type="text"> </td> <td> <button type="button" class="btn btn-danger delete-row">-</button> </td> </tr> <tr> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <button type="button" class="btn btn-danger delete-row">-</button> </td> <td> <input class="form-control" type="text"> </td> <td> <button type="button" class="btn btn-danger delete-row">-</button> </td> </tr> <tr> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <input class="form-control" type="text"> </td> <td> <button type="button" class="btn btn-danger delete-row">-</button> </td> <td> <input class="form-control" type="text"> </td> <td> <button type="button" class="btn btn-danger delete-row">-</button> </td> </tr> <!--End Grid--> </tbody> </table> </div> </div> </div> <a href="#" class="save pull-right"> <button type="button" class="btn btn-lg btn-primary"><i class="fa fa-spinner fa-spin"></i> Save</button> <div class="row col-xs-12> <div class="col-xs-8 col-xs-offset-2"> <div> <container> <a href="#" class="export"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-download-alt"></span> Download table data into Excel </button> </a> <a href="#" class="send"> <button type="button" onclick="location.href = '/billing/invoice/id?generate=xls';" class="btn btn default btn-lg"> <span class="glyphicon glyphicon-send"></span> Send Excel Invoice to Customer </button> </a> <a href="#" class="upload"> <button type="button" class="btn btn-default btn-lg disabled"> <span class="glyphicon glyphicon-export"></span> Export Invoice to Peachtree </button> </a> <a href="#" class="print"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-print"></span> Print Invoice </button> </a> </container> </div> </div> </a> </div> </div> </div> </div>