Web Designer Wall

Snippets Cart

Bootstrap 5 Shopping Cart with Order Summary

A shopping cart with product thumbnails, quantity steppers, a live order summary and a best-seller suggestion.

Bootstrap 5 No jQuery Sep 2020 5.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1080px">
    <div class="d-flex align-items-end justify-content-between mb-4">
      <div><span class="wdw-eyebrow">Checkout</span><h1 class="wdw-heading h2 mb-0">Shopping cart <span class="text-body-secondary fw-normal fs-5" id="cartCount"></span></h1></div>
      <a href="#" class="link-primary link-underline-opacity-0 fw-semibold d-none d-sm-inline" data-continue>← Continue shopping</a>
    </div>
    <div class="row g-4">
      <div class="col-lg-8">
        <div class="wdw-card p-2 p-md-3">
          <ul class="list-unstyled m-0" id="cartList">
            <li class="cart-item d-flex gap-3 p-3" data-price="122.21">
              <img src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=240&h=240&q=70" alt="Tan graphic tee" class="cart-img rounded-4" width="96" height="96">
              <div class="flex-grow-1">
                <div class="d-flex justify-content-between gap-2">
                  <div><h2 class="h6 mb-1">Age of Wisdom graphic tee</h2><p class="small text-body-secondary mb-0">Tan · Size S</p></div>
                  <p class="fw-bold mb-0 text-nowrap" data-line>$122.21</p>
                </div>
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mt-3">
                  <div class="qty input-group input-group-sm" role="group" aria-label="Quantity">
                    <button type="button" class="btn btn-outline-secondary" data-step="-1" aria-label="Decrease quantity">−</button>
                    <input type="number" min="1" max="99" class="form-control text-center" value="1" inputmode="numeric" aria-label="Quantity">
                    <button type="button" class="btn btn-outline-secondary" data-step="1" aria-label="Increase quantity">+</button>
                  </div>
                  <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none" data-remove>Remove</button>
                </div>
              </div>
            </li>
            <li class="cart-item d-flex gap-3 p-3 border-top" data-price="20.63">
              <img src="https://images.unsplash.com/photo-1503341504253-dff4815485f1?auto=format&fit=crop&w=240&h=240&q=70" alt="Red printed tee" class="cart-img rounded-4" width="96" height="96">
              <div class="flex-grow-1">
                <div class="d-flex justify-content-between gap-2">
                  <div><h2 class="h6 mb-1">Adidas men red printed tee</h2><p class="small text-body-secondary mb-0">Red · Size M</p></div>
                  <p class="fw-bold mb-0 text-nowrap" data-line>$41.26</p>
                </div>
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mt-3">
                  <div class="qty input-group input-group-sm" role="group" aria-label="Quantity">
                    <button type="button" class="btn btn-outline-secondary" data-step="-1" aria-label="Decrease quantity">−</button>
                    <input type="number" min="1" max="99" class="form-control text-center" value="2" inputmode="numeric" aria-label="Quantity">
                    <button type="button" class="btn btn-outline-secondary" data-step="1" aria-label="Increase quantity">+</button>
                  </div>
                  <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none" data-remove>Remove</button>
                </div>
              </div>
            </li>
          </ul>
          <p class="text-center text-body-secondary py-5 mb-0" id="cartEmpty" hidden>Your cart is empty.</p>
        </div>

        <div class="wdw-card-sm p-3 mt-4 d-flex align-items-center gap-3">
          <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?auto=format&fit=crop&w=200&h=200&q=70" alt="Penn State college tee" class="rounded-3" width="64" height="64" style="object-fit:cover">
          <div class="flex-grow-1"><span class="badge text-bg-primary mb-1">Best seller</span><p class="fw-semibold mb-0">Penn State college tee</p><p class="small text-body-secondary mb-0">$28.96</p></div>
          <button type="button" class="btn btn-outline-primary btn-sm rounded-pill" id="addBest">Add to cart</button>
        </div>
      </div>

      <div class="col-lg-4">
        <div class="wdw-card p-4 position-sticky" style="top:1.5rem">
          <h2 class="h5 fw-bold mb-3">Order summary</h2>
          <form class="mb-3" id="promoForm" novalidate>
            <label for="promoCode" class="form-label small fw-semibold">Promo code</label>
            <div class="input-group">
              <input type="text" class="form-control" id="promoCode" placeholder="Try SAVE10" autocomplete="off">
              <button type="submit" class="btn btn-outline-primary">Apply</button>
            </div>
            <p class="small mb-0 mt-1" id="promoMsg" role="status"></p>
          </form>
          <div id="sumLive" aria-live="polite" aria-atomic="true">
          <dl class="d-flex justify-content-between mb-2"><dt class="fw-normal text-body-secondary">Subtotal</dt><dd class="mb-0" id="sumSub">$0.00</dd></dl>
          <dl class="d-flex justify-content-between mb-2"><dt class="fw-normal text-body-secondary">Shipping</dt><dd class="mb-0 text-success fw-semibold">Free</dd></dl>
          <dl class="d-flex justify-content-between mb-3"><dt class="fw-normal text-body-secondary">Estimated tax</dt><dd class="mb-0" id="sumTax">$0.00</dd></dl>
          <div id="sumDisc" hidden><dl class="d-flex justify-content-between mb-2 text-success"><dt class="fw-normal">Discount (10%)</dt><dd class="mb-0" id="sumDiscVal">-$0.00</dd></dl></div>
          <hr>
          <dl class="d-flex justify-content-between mb-4 fs-5"><dt class="fw-bold">Total</dt><dd class="mb-0 fw-bold" id="sumTotal">$0.00</dd></dl>
          </div>
          <button type="button" class="btn btn-primary rounded-pill w-100 mb-2">Checkout →</button>
          <p class="small text-body-secondary text-center mb-2">Secure payment · 30-day returns</p>
          <a href="#" class="d-block text-center link-primary link-underline-opacity-0 fw-semibold py-2 d-sm-none">← Continue shopping</a>
        </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.

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

Related snippets

More cart snippets