Bootstrap Free Invoice Template

How to use this Bootstrap snippet

Invoice

BootstrapBrain Logo

From

BootstrapBrain
875 N Coast Hwybr
Laguna Beach, California, 92651
United States
Phone: (949) 494-7695
Email: [email protected]

Bill To

Mason Carter
7657 NW Prairie View Rd
Kansas City, Mississippi, 64151
United States
Phone: (816) 741-5790
Email: [email protected]

Invoice # INT-001

Account 786-54984 Order ID #9742 Invoice Date 12/10/2025 Due Date 18/12/2025
Qty Product Unit Price Amount
2 Console - Bootstrap Admin Template 75 150
1 Planet - Bootstrap Blog Template 29 29
4 Hello - Bootstrap Business Template 32 128
1 Palette - Bootstrap Startup Template 55 55
Subtotal 362
VAT (5%) 18.1
Shipping 15
Total $495.1

How to use this Bootstrap Free Invoice Template

Place the code in the <body> for Interface 
          
<!-- Invoice 1 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-xl-8 col-xxl-7">
        <div class="row gy-3 mb-3">
          <div class="col-6">
            <h2 class="text-uppercase text-endx m-0">Invoice</h2>
          </div>
          <div class="col-6">
            <a class="d-block text-end" href="#!">
              <img src="./assets/img/bsb-logo.svg" class="img-fluid" alt="BootstrapBrain Logo" width="135" height="44">
            </a>
          </div>
          <div class="col-12">
            <h4>From</h4>
            <address>
              <strong>BootstrapBrain</strong><br>
              875 N Coast Hwybr<br>
              Laguna Beach, California, 92651<br>
              United States<br>
              Phone: (949) 494-7695<br>
              Email: [email protected]
            </address>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-12 col-sm-6 col-md-8">
            <h4>Bill To</h4>
            <address>
              <strong>Mason Carter</strong><br>
              7657 NW Prairie View Rd<br>
              Kansas City, Mississippi, 64151<br>
              United States<br>
              Phone: (816) 741-5790<br>
              Email: [email protected]
            </address>
          </div>
          <div class="col-12 col-sm-6 col-md-4">
            <h4 class="row">
              <span class="col-6">Invoice #</span>
              <span class="col-6 text-sm-end">INT-001</span>
            </h4>
            <div class="row">
              <span class="col-6">Account</span>
              <span class="col-6 text-sm-end">786-54984</span>
              <span class="col-6">Order ID</span>
              <span class="col-6 text-sm-end">#9742</span>
              <span class="col-6">Invoice Date</span>
              <span class="col-6 text-sm-end">12/10/2025</span>
              <span class="col-6">Due Date</span>
              <span class="col-6 text-sm-end">18/12/2025</span>
            </div>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-12">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col" class="text-uppercase">Qty</th>
                    <th scope="col" class="text-uppercase">Product</th>
                    <th scope="col" class="text-uppercase text-end">Unit Price</th>
                    <th scope="col" class="text-uppercase text-end">Amount</th>
                  </tr>
                </thead>
                <tbody class="table-group-divider">
                  <tr>
                    <th scope="row">2</th>
                    <td>Console - Bootstrap Admin Template</td>
                    <td class="text-end">75</td>
                    <td class="text-end">150</td>
                  </tr>
                  <tr>
                    <th scope="row">1</th>
                    <td>Planet - Bootstrap Blog Template</td>
                    <td class="text-end">29</td>
                    <td class="text-end">29</td>
                  </tr>
                  <tr>
                    <th scope="row">4</th>
                    <td>Hello - Bootstrap Business Template</td>
                    <td class="text-end">32</td>
                    <td class="text-end">128</td>
                  </tr>
                  <tr>
                    <th scope="row">1</th>
                    <td>Palette - Bootstrap Startup Template</td>
                    <td class="text-end">55</td>
                    <td class="text-end">55</td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-end">Subtotal</td>
                    <td class="text-end">362</td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-end">VAT (5%)</td>
                    <td class="text-end">18.1</td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-end">Shipping</td>
                    <td class="text-end">15</td>
                  </tr>
                  <tr>
                    <th scope="row" colspan="3" class="text-uppercase text-end">Total</th>
                    <td class="text-end">$495.1</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 text-end">
            <button type="submit" class="btn btn-primary mb-3">Download Invoice</button>
            <button type="submit" class="btn btn-danger mb-3">Submit Payment</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">

The Bootstrap Free Invoice Template is a pre-designed layout crafted to assist e-commerce websites in generating professional and comprehensive invoices for their customers' purchases. Utilizing the Bootstrap framework, this template offers a responsive design, ensuring compatibility across various devices and screen sizes. Typically, this template includes sections for crucial details such as the seller's and buyer's information, itemized lists of purchased products or services, pricing, taxes, payment terms, and the total amount due. It may also incorporate customization options for branding elements like logos or colors to maintain the website's visual identity.