→ Anonymous
→ Invoice template with bootstrap

Invoice template with bootstrap

This bootstrap css example is contributed by Anonymous, on 20-Jul-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Other

Author Anonymous

325

v.4.6

Fork Fullscreen

<div class="col-md-6 text-md-right">
                            <p class="font-weight-bold mb-1">Invoice #550</p>
                            <p class="text-muted">Due: 01/01/2024</p>
                        </div>
                    </div>

<div class="row pb-5 p-5">
                        <div class="col-md-6">
                            <p class="font-weight-bold mb-4">Client Information</p>
                            <p class="mb-1">John Smith</p>
                            <p class="mb-1">123 Main St, Suite 456</p>
                            <p class="mb-1">Anytown, USA 12345</p>
                            <p class="mb-1">Email: john@example.com</p>
                            <p>Phone: +1 (555) 555-5555</p>
                        </div>

<div class="col-md-6 text-md-right">
                            <p class="font-weight-bold mb-4">Payment Details</p>
                            <p class="mb-1"><span class="text-muted">VAT: </span> 1234567890</p>
                            <p class="mb-1"><span class="text-muted">VAT ID: </span> 987654321</p>
                            <p class="mb-1"><span class="text-muted">Payment Type: </span> Credit Card</p>
                            <p class="mb-1"><span class="text-muted">Name: </span> John Smith</p>
                        </div>
                    </div>

<div class="row p-5">
                        <div class="col-md-12">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="border-0 text-uppercase small font-weight-bold">ID</th>
                                        <th class="border-0 text-uppercase small font-weight-bold">Item</th>
                                        <th class="border-0 text-uppercase small font-weight-bold">Description</th>
                                        <th class="border-0 text-uppercase small font-weight-bold">Quantity</th>
                                        <th class="border-0 text-uppercase small font-weight-bold">Unit Cost</th>
                                        <th class="border-0 text-uppercase small font-weight-bold">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Software</td>
                                        <td>LTS Versions</td>
                                        <td>21</td>
                                        <td>$321</td>
                                        <td>$6,741</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Support</td>
                                        <td>6 Months</td>
                                        <td>1</td>
                                        <td>$975</td>
                                        <td>$975</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Training</td>
                                        <td>On-site</td>
                                        <td>3</td>
                                        <td>$1,500</td>
                                        <td>$4,500</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

<div class="bg-light-custom p-4">
                        <div class="container">
                            <div class="row text-md-right">
                                <div class="col-12 col-md-4 mb-3">
                                    <div class="font-weight-bold">Sub - Total amount</div>
                                    <div class="h2 font-weight-light">$11,000</div>
                                </div>

<div class="col-12 col-md-4 mb-3">
                                    <div class="font-weight-bold">Grand Total</div>
                                    <div class="h2 font-weight-light">$12,216</div>
                                </div>
                            </div>
                        </div>
                    </div>

</div>
            </div>
        </div>
    </div>
</div>

More Examples

Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

6 months ago

451

v.5.3
Parallax effect with image background

Author:
Anonymous

2 months ago

319

v.4.6
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

5 months ago

1.7k

v.5.3
Minimal Changelog Page Template design

Author:
Asmath

1 month ago

1.2k

v.5.3
Background image with bootstrap 4
Bootstrap 4 background image

Author:
Anonymous

2 months ago

190

v.4.6
Changelog page template

Author:
Asmath

1 month ago

1.3k

v.5.3
Privacy policy template with boostrap 5

Author:
Anonymous

1 month ago

420

v.5.3
Responsive video container

Author:
Anonymous

6 months ago

332

v.4.6
Bootstrap 5 chat template

Author:
Andreas Müller

6 months ago

679

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

5 months ago

2.9k

v.5.3
Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

6 months ago

849

v.5.3
Gradient Footer Component
A modern, responsive footer component with a smooth gradient background, social icons, quick links, and newsletter subscription - perfect for contemporary web applications.

Author:
Alaric Sloane

3 months ago

362

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent