Web Designer Wall

Snippets Cart

Bootstrap 5 Checkout Page with Order Summary

A checkout page with a billing address form beside an order summary that has quantity controls, a promo code and a live total.

Bootstrap 5 No jQuery Oct 2020 4.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1040px">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
      <div>
        <span class="wdw-eyebrow">Checkout</span>
        <h1 class="wdw-heading h3 mb-0">Shipping details</h1>
      </div>
      <ol class="list-unstyled d-flex align-items-center gap-2 small fw-semibold mb-0 ck-steps" aria-label="Checkout progress">
        <li class="ck-step is-done"><span class="ck-dot" aria-hidden="true">✓</span><span class="visually-hidden">Completed: </span>Cart</li><li class="ck-line" aria-hidden="true"></li>
        <li class="ck-step is-current" aria-current="step"><span class="ck-dot" aria-hidden="true">2</span><span class="visually-hidden">Current step: </span>Checkout</li><li class="ck-line" aria-hidden="true"></li>
        <li class="ck-step"><span class="ck-dot" aria-hidden="true">3</span>Finish</li>
      </ol>
    </div>
    <div class="row g-4 align-items-start">
      <div class="col-lg-7">
        <form class="wdw-card p-4 p-md-5" onsubmit="return false">
          <h2 class="h5 mb-4">Billing address</h2>
          <div class="row g-3">
            <div class="col-12 form-floating"><input type="text" class="form-control" id="ckName" value="David Smith" placeholder="Name" autocomplete="name"><label for="ckName" class="ms-2">Full name</label></div>
            <div class="col-12 form-floating"><input type="email" class="form-control" id="ckEmail" value="[email protected]" placeholder="Email" autocomplete="email"><label for="ckEmail" class="ms-2">Email</label></div>
            <div class="col-sm-7 form-floating"><input type="text" class="form-control" id="ckCity" value="Houston" placeholder="City" autocomplete="address-level2"><label for="ckCity" class="ms-2">City</label></div>
            <div class="col-sm-5 form-floating"><input type="text" class="form-control" id="ckZip" value="77001" placeholder="Zip" autocomplete="postal-code"><label for="ckZip" class="ms-2">Zip code</label></div>
            <div class="col-12 form-floating"><input type="text" class="form-control" id="ckAddr" value="542 W. 14th Street" placeholder="Address" autocomplete="street-address"><label for="ckAddr" class="ms-2">Address</label></div>
            <div class="col-sm-5 form-floating"><input type="text" class="form-control" id="ckState" value="NY" placeholder="State" autocomplete="address-level1"><label for="ckState" class="ms-2">State</label></div>
            <div class="col-sm-7 form-floating"><select class="form-select" id="ckCountry" autocomplete="country-name"><option selected>United States</option><option>Canada</option><option>United Kingdom</option></select><label for="ckCountry" class="ms-2">Country</label></div>
          </div>
          <div class="form-check mt-4">
            <input class="form-check-input" type="checkbox" id="ckSame" checked>
            <label class="form-check-label" for="ckSame">Shipping address is the same as billing</label>
          </div>
        </form>
      </div>

      <div class="col-lg-5">
        <aside class="wdw-card p-4 p-md-5 sticky-lg-top" style="top:1.5rem" aria-label="Order summary">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="h5 mb-0">Order summary</h2>
            <button type="button" class="btn btn-sm btn-link link-primary text-decoration-none fw-semibold px-2" id="ckEdit">Edit details</button>
          </div>
          <div class="d-flex align-items-center gap-3 pb-4 border-bottom">
            <div class="position-relative">
              <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=200&fit=crop" width="64" height="64" class="rounded-3 object-fit-cover" alt="Cup of coffee">
              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary" id="ckQtyBadge">2</span>
            </div>
            <div class="flex-grow-1">
              <div class="fw-semibold text-body-emphasis">BattleCreek Coffee</div>
              <div class="small wdw-muted">SKU C-770</div>
            </div>
            <div class="d-flex align-items-center border rounded-pill ck-qty">
              <button type="button" class="btn border-0 px-2 rounded-circle" id="ckMinus" aria-label="Decrease quantity">−</button>
              <output class="px-1 fw-semibold" id="ckQty" aria-live="polite">2</output>
              <button type="button" class="btn border-0 px-2 rounded-circle" id="ckPlus" aria-label="Increase quantity">+</button>
            </div>
          </div>
          <form class="my-4" onsubmit="return false" novalidate>
            <div class="d-flex gap-2">
              <input type="text" class="form-control rounded-pill px-3" id="ckPromo" placeholder="Promo code" aria-label="Promo code" aria-describedby="ckPromoMsg">
              <button class="btn btn-outline-primary rounded-pill px-4" type="submit" id="ckApply">Apply</button>
            </div>
            <div class="invalid-feedback d-none ps-3" id="ckPromoErr">That code is not valid. Try SAVE10 for 10% off.</div>
            <div class="small text-success fw-semibold ps-3 mt-2 d-none" id="ckPromoOk" role="status"></div>
            <div class="visually-hidden" id="ckPromoMsg">Try SAVE10 for 10 percent off</div>
          </form>
          <dl class="mb-0 d-grid gap-2" aria-live="polite" aria-atomic="false">
            <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Subtotal</dt><dd class="mb-0" id="ckSub">$80.90</dd></div>
            <div class="d-flex justify-content-between d-none" id="ckDiscRow"><dt class="fw-normal text-success">Promo (10%)</dt><dd class="mb-0 text-success" id="ckDisc">−$8.09</dd></div>
            <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Shipping</dt><dd class="mb-0">$12.90</dd></div>
            <div class="d-flex justify-content-between border-top pt-3 mt-1 fs-5"><dt class="fw-bold">Total <span class="small fw-normal wdw-muted">USD</span></dt><dd class="mb-0 fw-bold" id="ckTotal">$93.80</dd></div>
          </dl>
          <button type="button" class="btn btn-primary rounded-pill w-100 mt-4" id="ckContinue">Continue to payment</button>
          <p class="small wdw-muted text-center mt-3 mb-0">Need help? Call <span class="text-body-emphasis fw-semibold">+31 4 4401 60</span> · Secure 256-bit encrypted checkout</p>
        </aside>
      </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 cart snippets