→ 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

249

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

Privacy policy template with boostrap 5

Author:
Anonymous

17 hours ago

6

v.5.3
Parallax effect with image background

Author:
Anonymous

2 weeks ago

88

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

Author:
Ankit khedkar

5 months ago

465

v.5.3
Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

5 months ago

304

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

5 months ago

435

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

3 months ago

1.4k

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

Author:
Anonymous

2 weeks ago

61

v.4.6
Responsive video container

Author:
Anonymous

5 months ago

254

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

3 months ago

674

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

3 months ago

1.4k

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

3 months ago

185

v.4.6
Interactive Shop Catalog Layout
shopping interface with wishlist functionality and dynamic filtering

Author:
Mason Ashford

1 month ago

557

v.5.3

Didn't find component you were looking for?

Search from 280+ componenent