<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 ----------> <div id="posts"> <div class="container"> <div class="row"> <div class="col-sm-8 offset-sm-2"> <!-- begin invoice --> <div class="invoice bg-white border border-dark"> <div class="m-4"> <span class="float-right"> <a href="javascript:;" onclick="window.print()" class="btn btn-sm btn-success m-b-10"> Print</a> </span> <span class="lead">INVOICE # 555</span> </div> <div class="invoice-header bg-light"> <div class="form-row mx-4"> <div class="invoice-from col-sm-4 pt-3 pb-2"> <small class="text-muted">from</small> <address class="m-t-5 m-b-5"> <strong>totoprayogo.com</strong><br/> D.I Yogyakarta<br/> Indonesia<br/> +62 8123 456 789<br/> </address> </div> <div class="invoice-to col-sm-4 pt-3 pb-2"> <small class="text-muted">to</small> <address class="m-t-5 m-b-5"> <strong>You</strong><br/> Everywhere<br/> Earth<br/> +62 0987 654 321</address> </div> <div class="invoice-date col-sm-4 pt-3 pb-2"> <div class="date m-t-5 lead">2019-02-26</div> <div class="invoice-detail"> INVOICE #555 <br/> </div> </div> </div> </div> <div class="invoice-content"> <div class="table-responsive"> <table class="table table-invoice"> <thead> <tr> <th>No. INV</th> <th>TANGGAL</th> <th>NOMINAL</th> <th>DESKRIPSI ORDER</th> </tr> </thead> <tbody> <tr> <td> 555</td> <td> 2019-02-26</td> <td> Rp 500,000</td> <td> Upgrade Premium Members </td> </tr> </tbody> </table> </div> <div class="invoice-price"> <div class="invoice-price-left"> STATUS INVOICE: CANCEL </div> <div class="invoice-price-right"> <small>TOTAL</small> Rp 500,000 </div> </div> </div> <div class="invoice-footer text-muted"> <p class="text-center m-b-5"> Lekas beritahu Kami jika ada pertanyaan mengenai Invoce ini. Terimakasih </p> <p class="text-center"> </p> </div> </div> <!-- end invoice --> </div> </div> </div> </div> </div> </div>

body { background: grey; margin-top: 120px; margin-bottom: 120px; }