Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Receipt"
Bootstrap 3.3.0 Snippet by
noemer
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
437
 
0 Fav
Post to Facebook
Tweet this
<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="receipt-main col-xs-10 col-sm-10 col-md-6 col-xs-offset-1 col-sm-offset-1 col-md-offset-3"> <div class="row"> <div class="receipt-header"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="receipt-left"> <img class="img-responsive" alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" style="width: 71px; border-radius: 43px;"> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 text-right"> <div class="receipt-right"> <h5>TechiTouch.</h5> <p>+91 12345-6789 <i class="fa fa-phone"></i></p> <p>info@gmail.com <i class="fa fa-envelope-o"></i></p> <p>Australia <i class="fa fa-location-arrow"></i></p> </div> </div> </div> </div> <div class="row"> <div class="receipt-header receipt-header-mid"> <div class="col-xs-8 col-sm-8 col-md-8 text-left"> <div class="receipt-right"> <h5>Gurdeep Singh <small> | Lucky Number : 156</small></h5> <p><b>Mobile :</b> +91 12345-6789</p> <p><b>Email :</b> info@gmail.com</p> <p><b>Address :</b> Australia</p> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="receipt-left"> <h1>Receipt</h1> </div> </div> </div> </div> <div> <table class="table table-bordered"> <thead> <tr> <th>Description</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td class="col-md-9">Payment for August 2016</td> <td class="col-md-3"><i class="fa fa-inr"></i> 15,000/-</td> </tr> <tr> <td class="col-md-9">Payment for June 2016</td> <td class="col-md-3"><i class="fa fa-inr"></i> 6,00/-</td> </tr> <tr> <td class="col-md-9">Payment for May 2016</td> <td class="col-md-3"><i class="fa fa-inr"></i> 35,00/-</td> </tr> <tr> <td class="text-right"> <p> <strong>Total Amount: </strong> </p> <p> <strong>Late Fees: </strong> </p> <p> <strong>Payable Amount: </strong> </p> <p> <strong>Balance Due: </strong> </p> </td> <td> <p> <strong><i class="fa fa-inr"></i> 65,500/-</strong> </p> <p> <strong><i class="fa fa-inr"></i> 500/-</strong> </p> <p> <strong><i class="fa fa-inr"></i> 1300/-</strong> </p> <p> <strong><i class="fa fa-inr"></i> 9500/-</strong> </p> </td> </tr> <tr> <td class="text-right"><h2><strong>Total: </strong></h2></td> <td class="text-left text-danger"><h2><strong><i class="fa fa-inr"></i> 31.566/-</strong></h2></td> </tr> </tbody> </table> </div> <div class="row"> <div class="receipt-header receipt-header-mid receipt-footer"> <div class="col-xs-8 col-sm-8 col-md-8 text-left"> <div class="receipt-right"> <p><b>Date :</b> 15 Aug 2016</p> <h5 style="color: rgb(140, 140, 140);">Thank you for your business!</h5> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="receipt-left"> <h1>Signature</h1> </div> </div> </div> </div> </div> </div> </div>
.text-danger strong { color: #9f181c; } .receipt-main { background: #ffffff none repeat scroll 0 0; border-bottom: 12px solid #333333; border-top: 12px solid #9f181c; margin-top: 50px; margin-bottom: 50px; padding: 40px 30px !important; position: relative; box-shadow: 0 1px 21px #acacac; color: #333333; font-family: open sans; } .receipt-main p { color: #333333; font-family: open sans; line-height: 1.42857; } .receipt-footer h1 { font-size: 15px; font-weight: 400 !important; margin: 0 !important; } .receipt-main::after { background: #414143 none repeat scroll 0 0; content: ""; height: 5px; left: 0; position: absolute; right: 0; top: -13px; } .receipt-main thead { background: #414143 none repeat scroll 0 0; } .receipt-main thead th { color:#fff; } .receipt-right h5 { font-size: 16px; font-weight: bold; margin: 0 0 7px 0; } .receipt-right p { font-size: 12px; margin: 0px; } .receipt-right p i { text-align: center; width: 18px; } .receipt-main td { padding: 9px 20px !important; } .receipt-main th { padding: 13px 20px !important; } .receipt-main td { font-size: 13px; font-weight: initial !important; } .receipt-main td p:last-child { margin: 0; padding: 0; } .receipt-main td h2 { font-size: 20px; font-weight: 900; margin: 0; text-transform: uppercase; } .receipt-header-mid .receipt-left h1 { font-weight: 100; margin: 34px 0 0; text-align: right; text-transform: uppercase; } .receipt-header-mid { margin: 24px 0; overflow: hidden; } #container { background-color: #dcdcdc; }
Related:
See More
Template
Black Dashboard PRO React
70.9K
112
Receipt
156.0K
155
Payment Receipt BS3
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76