Bootstrap 5 invoice snippet

Loading…

Bootstrap 5 invoice snippet | GoSnippets

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>

Bootstrap 5 invoice snippet

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery