→ 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

215

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

Interactive Kanban Task Board

Author:
Anonymous

2 months ago

1.2k

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

4 months ago

327

v.5.3
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

2 months ago

249

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

Author:
Ankit khedkar

4 months ago

223

v.5.3
Responsive video container

Author:
Anonymous

4 months ago

212

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

Author:
Ankit khedkar

4 months ago

331

v.5.3
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

2 months ago

1.7k

v.4.6
Contact Us form

Author:
Anonymous

8 months ago

2.2k

v.4.6
Pricing Cards

Author:
Anonymous

2 weeks ago

49

v.5.3
Minimal testimonial section
With user images

Author:
Noah Kim

4 months ago

188

v.5.3
Delete Confirmation Modal

Author:
Alaric Sloane

1 month ago

901

v.5.3
Contact us section with Image

Author:
Anonymous

4 months ago

1.9k

v.4.6

Didn't find component you were looking for?

Search from 200+ componenent