Web Designer Wall

Snippets Billing

Bootstrap 5 Order Confirmation Receipt Template

An order confirmation receipt with a success header, order details, itemised products with photos and a clear totals breakdown.

Bootstrap 5 No jQuery Aug 2020 8.5K views 

<section class="iv-section wdw-stage">
  <div class="container" style="max-width:860px">
    <div class="wdw-card overflow-hidden">
      <div class="iv-head px-4 py-3 d-flex align-items-center gap-3">
        <span class="iv-check d-inline-flex align-items-center justify-content-center rounded-circle flex-shrink-0" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5L20 7"/></svg></span>
        <div>
          <h2 class="h4 wdw-heading mb-0">Order confirmed</h2>
          <p class="mb-0 text-body-secondary small">Thanks, Chris. Your order ships within two days.</p>
        </div>
      </div>
      <div class="iv-strip bg-body-tertiary border-top border-bottom px-4 py-2 small d-flex flex-wrap column-gap-4 row-gap-1">
        <span><span class="text-body-secondary">Date</span> <strong>12 Jan 2026</strong></span>
        <span><span class="text-body-secondary">Order</span> <strong>MT-12332345</strong></span>
        <span><span class="text-body-secondary">Payment</span> <strong>Visa 4242</strong></span>
        <span><span class="text-body-secondary">Ship to</span> <strong>414 Advert Ave, NYC</strong></span>
      </div>
      <div class="card-body p-4">
        <ol class="iv-steps list-unstyled d-flex gap-2 mb-4 p-0" aria-label="Delivery progress">
          <li class="iv-step flex-fill d-flex flex-column align-items-center text-center gap-1 done"><span class="iv-dot iv-done rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5L20 7"/></svg></span><span class="small fw-semibold">Confirmed</span><span class="small text-body-secondary">12 Jan</span></li>
          <li class="iv-step flex-fill d-flex flex-column align-items-center text-center gap-1 current"><span class="iv-dot iv-current rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0"></span><span class="small fw-semibold">Packed</span><span class="small text-body-secondary">13 Jan</span></li>
          <li class="iv-step flex-fill d-flex flex-column align-items-center text-center gap-1 todo"><span class="iv-dot iv-todo rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0"></span><span class="small fw-semibold">Shipped</span><span class="small text-body-secondary">Est. 14 Jan</span></li>
          <li class="iv-step flex-fill d-flex flex-column align-items-center text-center gap-1 todo"><span class="iv-dot iv-todo rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0"></span><span class="small fw-semibold">Delivered</span><span class="small text-body-secondary">Est. 17 Jan</span></li>
        </ol>
        <div class="row g-4">
          <div class="col-md-7">
            <ul class="list-group list-group-flush">
              <li class="list-group-item bg-transparent px-0 pt-0 pb-3 d-flex align-items-center gap-3">
                <span class="iv-tile rounded-3 bg-body-tertiary border p-1 flex-shrink-0"><img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=160&q=70" width="56" height="56" class="rounded-2 object-fit-cover d-block" alt="Red running shoe"></span>
                <div class="flex-grow-1"><div class="fw-semibold">Stride Runner Shoes</div><div class="small text-body-secondary">Qty 1 · Colour Red</div></div>
                <div class="fw-semibold">$67.50</div>
              </li>
              <li class="list-group-item bg-transparent px-0 pb-0 pt-3 d-flex align-items-center gap-3">
                <span class="iv-tile rounded-3 bg-body-tertiary border p-1 flex-shrink-0"><img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=160&q=70" width="56" height="56" class="rounded-2 object-fit-cover d-block" alt="Wrist watch"></span>
                <div class="flex-grow-1"><div class="fw-semibold">Classic Wrist Watch</div><div class="small text-body-secondary">Qty 1 · Colour Silver</div></div>
                <div class="fw-semibold">$77.50</div>
              </li>
            </ul>
          </div>
          <div class="col-md-5">
            <div class="d-flex justify-content-between align-items-baseline small py-1"><span class="text-body-secondary">Subtotal</span><span class="">$145.00</span></div>
            <div class="d-flex justify-content-between align-items-baseline small py-1"><span class="text-body-secondary">Shipping</span><span class="">$22.00</span></div>
            <div class="d-flex justify-content-between align-items-baseline small py-1"><span class="text-body-secondary">Tax</span><span class="">$7.65</span></div>
            <div class="d-flex justify-content-between align-items-baseline small py-1"><span class="text-body-secondary">Discount</span><span class="text-success-emphasis">-$6.15</span></div>
            <div class="d-flex justify-content-between align-items-baseline border-top pt-2 mt-1"><span class="fw-semibold">Total</span><span class="h4 wdw-heading mb-0">$168.50</span></div>
          </div>
        </div>
      </div>
      <div class="px-4 py-3 border-top bg-body-tertiary d-flex flex-wrap justify-content-between align-items-center gap-3">
        <span class="small text-body-secondary">A confirmation was sent to [email protected]</span>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-outline-secondary text-body rounded-pill px-4">Track order</button>
          <button type="button" class="btn btn-primary rounded-pill px-4" id="ivPrint">Print receipt</button>
        </div>
      </div>
    </div>
  </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 billing snippets