Web Designer Wall

Snippets Invoice

Bootstrap 5 Invoice Template with Print and Pay Buttons

A clean sale invoice with sender, recipient and payment details, an itemised table, discount and VAT totals, plus print and pay actions.

Bootstrap 5 No jQuery Aug 2020 4.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 920px;">
    <article class="wdw-card inv overflow-hidden" aria-labelledby="inv-title">
      <header class="d-flex flex-wrap align-items-center justify-content-between gap-3 p-4 border-bottom">
        <div class="d-flex align-items-center gap-3">
          <span class="wdw-icon inv-brand fw-bold" aria-hidden="true">BB</span>
          <div>
          <span class="wdw-eyebrow">Invoice</span>
          <h2 id="inv-title" class="wdw-heading h4 mb-1">#BBB-10010110101938</h2>
          <div class="d-flex flex-wrap align-items-center gap-2">
            <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Awaiting payment</span>
            <span class="wdw-muted small">Issued Apr 30, 2026 · Due May 14, 2026</span>
          </div>
          </div>
        </div>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-outline-primary rounded-pill px-3" data-inv-print>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9V3h12v6"/><rect x="6" y="14" width="12" height="7" rx="1"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/></svg>
            Print
          </button>
          <button type="button" class="btn btn-primary rounded-pill px-4" data-inv-pay>Pay $16,705.92</button>
        </div>
      </header>

      <div class="row g-3 p-4">
        <div class="col-sm-6 col-md-3">
          <div class="wdw-eyebrow mb-2 text-body-secondary">From</div>
          <address class="mb-0 small lh-base">
            <strong class="text-body-emphasis">BBBootstrap Inc</strong><br>
            42 Awesome Enclave<br>New York City, NY 10394<br>
            [email protected]<br>+48 123 456 789
          </address>
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="wdw-eyebrow mb-2 text-body-secondary">Billed to</div>
          <address class="mb-0 small lh-base">
            <strong class="text-body-emphasis">Northwind Retail Ltd</strong><br>
            18 Market Street<br>Boston, MA 02110<br>
            [email protected]<br>+1 617 555 0142
          </address>
        </div>
        <div class="col-md-6 col-lg-6">
          <div class="wdw-eyebrow mb-2 text-body-secondary">Payment details</div>
          <dl class="row small mb-0 lh-base">
            <dt class="col-4 fw-normal wdw-muted">VAT</dt><dd class="col-8 mb-0">NYC09090390</dd>
            <dt class="col-4 fw-normal wdw-muted">Account</dt><dd class="col-8 mb-0">BBBootstrap Inc</dd>
            <dt class="col-4 fw-normal wdw-muted">SWIFT</dt><dd class="col-8 mb-0 fw-semibold font-monospace text-nowrap">99 8888 7777 6666 5555</dd>
          </dl>
        </div>
      </div>

      <div class="px-3 px-md-4"><div class="table-responsive rounded-3 border">
        <table class="table align-middle mb-0 inv-table">
          <thead><tr><th scope="col">#</th><th scope="col">Item</th><th scope="col" class="d-none d-md-table-cell">Description</th><th scope="col" class="text-end">Qty</th><th scope="col" class="text-end d-none d-sm-table-cell">Unit cost</th><th scope="col" class="text-end">Total</th></tr></thead>
          <tbody>
            <tr><td class="wdw-muted">1</td><th scope="row">iPhone 10</th><td class="d-none d-md-table-cell wdw-muted">Apple iPhone 10 with extended warranty</td><td class="text-end">16</td><td class="text-end d-none d-sm-table-cell">$999.00</td><td class="text-end fw-semibold">$15,984.00</td></tr>
            <tr><td class="wdw-muted">2</td><th scope="row">Samsung S6</th><td class="d-none d-md-table-cell wdw-muted">Samsung S6 with extended warranty</td><td class="text-end">20</td><td class="text-end d-none d-sm-table-cell">$150.00</td><td class="text-end fw-semibold">$3,000.00</td></tr>
          </tbody>
        </table>
      </div></div>

      <div class="row g-4 p-4 align-items-center">
        <div class="col-md-6 order-2 order-md-1">
          <ol class="inv-steps list-unstyled d-flex mb-3 small" aria-label="Invoice status">
            <li class="done"><span class="inv-dot" aria-hidden="true"></span>Issued</li>
            <li class="done"><span class="inv-dot" aria-hidden="true"></span>Sent</li>
            <li aria-current="step"><span class="inv-dot" aria-hidden="true"></span>Paid</li>
          </ol>
          <div class="wdw-eyebrow mb-1 text-body-secondary">Notes</div>
          <p class="small wdw-muted mb-0">Payment is due within 14 days. Please include the invoice number in your bank transfer reference. Thank you for your business.</p>
        </div>
        <div class="col-md-6 order-1 order-md-2">
          <dl class="inv-totals mb-0">
            <div><dt>Subtotal</dt><dd>$18,984.00</dd></div>
            <div><dt>Discount (20%)</dt><dd class="text-success">−$3,796.80</dd></div>
            <div><dt>VAT (10%)</dt><dd>$1,518.72</dd></div>
          </dl>
          <div class="inv-grand d-flex align-items-center justify-content-between rounded-4 px-3 py-3 mt-2"><span class="fw-bold text-body-emphasis">Total due</span><span class="inv-amount">$16,705.92</span></div>
        </div>
      </div>
    </article>
  </div>
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast align-items-center text-bg-dark border-0" role="status" aria-live="polite" aria-atomic="true" id="invToast">
      <div class="d-flex"><div class="toast-body">Redirecting to secure checkout…</div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More invoice snippets