Web Designer Wall

Snippets Invoice

Bootstrap 5 Invoice Template with Print Button

A clean invoice with an awaiting-payment status strip, company and client details, an itemised table, totals, and print and save-as-PDF actions.

Bootstrap 5 No jQuery Oct 2020 6.6K views 

<section class="wdw-stage inv-stage">
  <div class="container" style="max-width:860px">
    <article class="wdw-card inv overflow-hidden" id="inv-doc">
      <div class="inv-strip d-flex flex-wrap align-items-center justify-content-between gap-2 px-4 py-2">
        <div class="d-flex align-items-center gap-2">
          <span class="badge rounded-pill text-bg-warning">Awaiting payment</span>
          <span class="small">Due Nov 15, 2026</span>
        </div>
        <div class="d-flex gap-2" data-inv-actions>
          <button type="button" class="btn btn-sm btn-outline-primary rounded-pill" id="inv-print">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9V3h12v6M6 18H4a1 1 0 0 1-1-1v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1h-2"/><rect x="6" y="14" width="12" height="7" rx="1"/></svg><span class="d-none d-sm-inline">Print</span><span class="visually-hidden d-sm-none">Print</span>
          </button>
          <button type="button" class="btn btn-sm btn-primary rounded-pill" id="inv-pdf">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11m0 0l-4-4m4 4l4-4M5 20h14"/></svg><span class="d-none d-sm-inline">Download PDF</span><span class="visually-hidden d-sm-none">Download PDF</span>
          </button>
        </div>
      </div>
      <div class="p-3 p-md-4">
        <header class="d-flex justify-content-between align-items-center gap-3 flex-wrap pb-3 border-bottom">
          <div class="d-flex align-items-center gap-2">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l9 5v8l-9 5-9-5V8z"/></svg></span>
            <div>
              <div class="fw-bold fs-5 text-body-emphasis lh-1">Northwind Studio</div>
              <div class="small wdw-muted">Invoice <span class="fw-semibold text-body-emphasis">#INV-2026-014</span></div>
            </div>
          </div>
          <div class="text-sm-end">
            <div class="small wdw-muted">Issued Oct 15, 2026</div>
            <div class="small wdw-muted">[email protected]</div>
          </div>
        </header>
        <div class="row g-3 py-3">
          <div class="col-sm-6">
            <div class="wdw-eyebrow mb-1">Billed to</div>
            <div class="fw-bold text-body-emphasis">John Doe</div>
            <address class="small wdw-muted mb-0">796 Silver Harbour, TX 79273, US · [email protected]</address>
          </div>
          <div class="col-sm-6 text-sm-end">
            <div class="wdw-eyebrow mb-1">From</div>
            <address class="small wdw-muted mb-0">455 Foggy Heights, AZ 85004, US<br>(123) 456-789</address>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table align-middle mb-0 inv-table">
            <caption class="visually-hidden">Invoice line items with rate, hours and total</caption>
            <thead>
              <tr><th scope="col">Description</th><th scope="col" class="text-end d-none d-sm-table-cell">Rate</th><th scope="col" class="text-end d-none d-sm-table-cell">Hours</th><th scope="col" class="text-end">Total</th></tr>
            </thead>
            <tbody>
              <tr><th scope="row" class="fw-normal"><div class="fw-semibold text-body-emphasis">Website design</div><div class="small wdw-muted">Design built on the existing visual identity</div><div class="small text-primary d-sm-none mt-1 fw-semibold">30 h × $40.00</div></th><td class="text-end d-none d-sm-table-cell">$40.00</td><td class="text-end d-none d-sm-table-cell">30</td><td class="text-end fw-semibold">$1,200.00</td></tr>
              <tr><th scope="row" class="fw-normal"><div class="fw-semibold text-body-emphasis">Website development</div><div class="small wdw-muted">Content management system build</div><div class="small text-primary d-sm-none mt-1 fw-semibold">80 h × $40.00</div></th><td class="text-end d-none d-sm-table-cell">$40.00</td><td class="text-end d-none d-sm-table-cell">80</td><td class="text-end fw-semibold">$3,200.00</td></tr>
              <tr><th scope="row" class="fw-normal"><div class="fw-semibold text-body-emphasis">Search engine optimisation</div><div class="small wdw-muted">On-page and technical SEO</div><div class="small text-primary d-sm-none mt-1 fw-semibold">20 h × $40.00</div></th><td class="text-end d-none d-sm-table-cell">$40.00</td><td class="text-end d-none d-sm-table-cell">20</td><td class="text-end fw-semibold">$800.00</td></tr>
            </tbody>
          </table>
        </div>
        <div class="row justify-content-end pt-3">
          <div class="col-sm-7 col-md-5">
            <dl class="row mb-0 small">
              <dt class="col-6 fw-normal wdw-muted">Subtotal</dt><dd class="col-6 text-end mb-1">$5,200.00</dd>
              <dt class="col-6 fw-normal wdw-muted">Tax (25%)</dt><dd class="col-6 text-end mb-1">$1,300.00</dd>
            </dl>
            <div class="inv-total d-flex justify-content-between align-items-center rounded-3 px-3 py-2 mt-1">
              <span class="fw-semibold">Total due</span><span class="fs-4 fw-bold">$6,500.00</span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>

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

Related snippets

More invoice snippets