Utilities Bootstrap 5Free+ CSS
Bootstrap 5 invoice snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.
5.4k views38 downloads
gosnippets.com/preview/bootstrap-5-invoice-snippet
Source Code
1<div class="container mt-5 mb-3">
2 <div class="row d-flex justify-content-center">
3 <div class="col-md-8">
4 <div class="card">
5 <div class="d-flex flex-row p-2">
6 <div class="d-flex flex-column"> <span class="font-weight-bold">Tax Invoice/Bill of Supply/Cash Memo</span> </div>
7 </div>
8 <hr>
9 <div class="table-responsive p-2">
10 <table class="table table-borderless">
11 <tbody>
12 <tr class="add">
13 <td>Sold By</td>
14 <td>Billing Address</td>
15 </tr>
16 <tr class="content">
17 <td class="font-weight-bold"><h3>Mr. Robot Computers </h3> <p>Robot Complex, Gandhi street,<br> MP Nagar Bhopal</p></td>
18 <td class="font-weight-bold">Modi Stadium <br> Gandhi Nagar, Gujrat</td>
19 </tr>
20 </tbody>
21 </table>
22 </div>
23 <hr>
24 <div class="products p-2">
25 <table class="table table-dark">
26 <thead>
27 <tr>
28 <td scope="col">Product List</td>
29 <td scope="col">Quantity</td>
30 <td scope="col">Price</td>
31 <td scope="col" class="text-center">Total</td>
32 </tr>
33 </thead>
34 <tbody>
35 <tr class="content">
36 <td>Desktop</td>
37 <td>15</td>
38 <td>2000</td>
39 <td class="text-center">₹30,000</td>
40 </tr>
41 <tr class="content">
42 <td>Keyboard</td>
43 <td>10</td>
44 <td>200</td>
45 <td class="text-center">₹2000</td>
46 </tr>
47 <tr class="content">
48 <td>Mouse</td>
49 <td>10</td>
50 <td>150</td>
51 <td class="text-center">₹1500</td>
52 </tr>
53 </tbody>
54 </table>
55 </div>
56 <hr>
57 <div class="products p-2">
58 <table class="table table-borderless">
59 <tbody>
60 <tr class="add">
61 <td class="text-center">
62 <h3>Total Price</h3>
63 </td>
64 </tr>
65 <tr class="content">
66 <td class="text-center">
67 <h2>₹33,500</h2>
68 </td>
69 </tr>
70 </tbody>
71 </table>
72 </div>
73 <hr>
74 </div>
75 </div>
76 </div>
77</div>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.