Receipt page

This bootstrap snippet called "Receipt page" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: receipt

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="row invoice row-printable">
    <div class="col-md-7 col-md-offset-2">
        <!-- col-lg-12 start here -->
        <div class="panel panel-default plain" id="dash_0">
            <!-- Start .panel -->
            <div class="panel-body p30">
                <div class="row">
                    <!-- Start .row -->
                    <div class="col-lg-6">
                        <!-- col-lg-6 start here -->
                        <div class="invoice-logo"><img src="http://themes.suggelab.com/dash/img/logo-blue.png" alt="Invoice logo"></div>
                    </div>
                    <!-- col-lg-6 end here -->
                    <div class="col-lg-6">
                        <!-- col-lg-6 start here -->
                        <div class="invoice-from">
                            <ul class="list-unstyled text-right">
                                <li>Dash LLC</li>
                                <li>2500 Ridgepoint Dr, Suite 105-C</li>
                                <li>Austin TX 78754</li>
                                <li>VAT Number EU826113958</li>
                            </ul>
                        </div>
                    </div>
                    <!-- col-lg-6 end here -->
                    <div class="col-lg-12">
                        <!-- col-lg-12 start here -->
                        <div class="invoice-details mt25">
                            <div class="well">
                                <ul class="list-unstyled mb0">
                                    <li><strong>Invoice</strong> #936988</li>
                                    <li><strong>Invoice Date:</strong> Monday, October 10th, 2015</li>
                                    <li><strong>Due Date:</strong> Thursday, December 1th, 2015</li>
                                    <li><strong>Status:</strong> <span class="label label-danger">UNPAID</span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="invoice-to mt25">
                            <ul class="list-unstyled">
                                <li><strong>Invoiced To</strong></li>
                                <li>Jakob Smith</li>
                                <li>Roupark 37</li>
                                <li>New York, NY, 2014</li>
                                <li>USA</li>
                            </ul>
                        </div>
                        <div class="invoice-items">
                            <div class="table-responsive" style="overflow: hidden; outline: none;" tabindex="0">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="per70 text-center">Description</th>
                                            <th class="per5 text-center">Qty</th>
                                            <th class="per25 text-center">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1024MB Cloud 2.0 Server - elisium.dynamic.com (12/04/2014 - 01/03/2015)</td>
                                            <td class="text-center">1</td>
                                            <td class="text-center">$25.00 USD</td>
                                        </tr>
                                        <tr>
                                            <td>Logo design</td>
                                            <td class="text-center">1</td>
                                            <td class="text-center">$200.00 USD</td>
                                        </tr>
                                        <tr>
                                            <td>Backup - 1024MB Cloud 2.0 Server - elisium.dynamic.com</td>
                                            <td class="text-center">12</td>
                                            <td class="text-center">$12.00 USD</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="2" class="text-right">Sub Total:</th>
                                            <th class="text-center">$237.00 USD</th>
                                        </tr>
                                        <tr>
                                            <th colspan="2" class="text-right">20% VAT:</th>
                                            <th class="text-center">$47.40 USD</th>
                                        </tr>
                                        <tr>
                                            <th colspan="2" class="text-right">Credit:</th>
                                            <th class="text-center">$00.00 USD</th>
                                        </tr>
                                        <tr>
                                            <th colspan="2" class="text-right">Total:</th>
                                            <th class="text-center">$284.4.40 USD</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <div class="invoice-footer mt25">
                            <p class="text-center">Generated on Monday, October 08th, 2015 <a href="#" class="btn btn-default ml15"><i class="fa fa-print mr5"></i> Print</a></p>
                        </div>
                    </div>
                    <!-- col-lg-12 end here -->
                </div>
                <!-- End .row -->
            </div>
        </div>
        <!-- End .panel -->
    </div>
    <!-- col-lg-12 end here -->
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{
    margin-top:10px;
    background:#eee;    
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 10th 2016, 21:08

Views: 608