Web Designer Wall

Snippets Order-tracking

Bootstrap 5 Order Tracking Card with Progress Steps

An order-tracking card showing the product, price, live status and a three-step progress bar with working track, cancel and next-step actions.

Bootstrap 5 Bootstrap 6 No jQuery Dec 2019 8.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width:660px">
    <article class="wdw-card overflow-hidden" id="order-card">
      <header class="d-flex justify-content-between align-items-start gap-3 p-4 pb-3">
        <div>
          <div class="small wdw-muted">Order <span class="fw-bold text-body-emphasis">#1222528743</span></div>
          <div class="small wdw-muted">Placed on 12 March 2026</div>
        </div>
        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-3">View details</a>
      </header>
      <div class="px-4 pb-4 d-flex gap-3 align-items-center">
        <div class="flex-grow-1">
          <h1 class="h5 fw-bold mb-1">Floral Print Heels</h1>
          <div class="small wdw-muted mb-3">Qty 1 pair · Cash on delivery</div>
          <div class="fs-4 fw-bold mb-3">₹1,500</div>
          <span class="badge rounded-pill bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center gap-2 py-2 px-3" id="order-badge">
            <span class="wdw-pulse" aria-hidden="true"></span><span id="order-status" role="status" aria-live="polite">Reached hub, Delhi</span>
          </span>
          <div class="small wdw-muted mt-2">Updated 11:30 pm today</div>
        </div>
        <img class="rounded-4 object-fit-cover flex-shrink-0" src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?auto=format&fit=crop&w=300&h=300&q=70" width="112" height="112" alt="Floral print high heels">
      </div>
      <div class="px-4 pb-3">
        <dl class="row g-3 mb-0 small rounded-3 bg-body-tertiary mx-0 p-3">
          <div class="col-6 p-0 ps-1"><dt class="wdw-muted fw-medium">Carrier</dt><dd class="mb-0 fw-semibold">BlueDart Express</dd></div>
          <div class="col-6 p-0"><dt class="wdw-muted fw-medium">Estimated delivery</dt><dd class="mb-0 fw-semibold" id="order-eta">Thu, 14 March</dd></div>
        </dl>
      </div>
      <div class="px-4 pb-4 pt-2">
        <ol class="wdw-track list-unstyled mb-0" aria-label="Order progress">
          <li class="is-done"><span class="wdw-dot"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></span><span class="wdw-step">Placed<span class="visually-hidden wdw-state"> (completed)</span></span></li>
          <li class="is-current" aria-current="step"><span class="wdw-dot">2</span><span class="wdw-step">Shipped<span class="visually-hidden wdw-state"> (current)</span></span></li>
          <li><span class="wdw-dot">3</span><span class="wdw-step">Delivered<span class="visually-hidden wdw-state"></span></span></li>
        </ol>
      </div>
      <footer class="d-flex border-top">
        <button type="button" class="btn btn-link link-primary text-decoration-none rounded-0 flex-fill py-3" data-action="track">Track</button>
        <button type="button" class="btn btn-link link-danger text-decoration-none rounded-0 flex-fill py-3 border-start" data-action="cancel">Cancel</button>
        <button type="button" class="btn btn-link link-primary text-decoration-none rounded-0 flex-fill py-3 border-start" data-action="advance">Next step</button>
      </footer>
      <div class="px-4 py-2 small wdw-muted border-top" id="order-hint" role="status" aria-live="polite">Use “Next step” to move the order forward.</div>
    </article>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

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

Related snippets

More Order-tracking snippets