Bootstrap Components

<section class="py-20 bg-light overflow-hidden">
  <div class="container">
    <div class="p-8 p-lg-20 bg-white">
      <h2 class="mb-8 mb-md-20">Your cart</h2>
      <div class="row align-items-center">
        <div class="col-12 col-xl-8 mb-8 mb-xl-0">
          <div class="d-none d-lg-flex row">
            <div class="col-12 col-lg-6">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;">Description</h4>
            </div>
            <div class="col-12 col-lg-2">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;">Price</h4>
            </div>
            <div class="col-12 col-lg-2 text-center">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;">Quantity</h4>
            </div>
            <div class="col-12 col-lg-2 text-end">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;">Subtotal</h4>
            </div>
          </div>
          <div class="mb-12 py-6 border-top border-bottom">
            <div class="row align-items-center mb-6 mb-md-3">
              <div class="col-12 col-md-8 col-lg-6 mb-6 mb-md-0">
                <div class="row align-items-center">
                  <div class="col-12 col-md-4 mb-3">
                    <div class="d-flex align-items-center justify-content-center bg-light" style="width: 96px; height: 128px;">
                      <img class="img-fluid" style="object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
                    </div>
                  </div>
                  <div class="col-8">
                    <h3 class="mb-2 lead fw-bold">BRILE water filter carafe</h3>
                    <p class="mb-0 text-secondary">Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="d-none d-lg-block col-lg-2">
                <p class="mb-0 lead fw-bold text-info">$29.89</p>
                <span class="small text-secondary text-decoration-line-through">$33.69</span>
              </div>
              <div class="col-auto col-md-2">
                <div class="d-inline-flex align-items-center px-4 fw-bold text-secondary border rounded-2">
                  <button class="btn px-0 py-2">
                    <svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                  </button>
                  <input class="form-control px-2 py-4 text-center text-md-end border-0" style="width: 48px;" type="number" placeholder="1">
                  <button class="btn px-0 py-2">
                    <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                  </button>
                </div>
              </div>
              <div class="col-auto col-md-2 text-end">
                <p class="lead fw-bold text-info">$29.89</p>
              </div>
            </div>
            <div class="row align-items-center">
              <div class="col-12 col-md-8 col-lg-6 mb-6 mb-md-0">
                <div class="row align-items-center">
                  <div class="col-12 col-md-4 mb-3">
                    <div class="d-flex align-items-center justify-content-center bg-light" style="width: 96px; height: 128px;">
                      <img class="img-fluid" style="object-fit: contain;" src="yofte-assets/images/basketball.png" alt="">
                    </div>
                  </div>
                  <div class="col-8">
                    <h3 class="mb-2 lead fw-bold">Nike basketball ball</h3>
                    <p class="mb-0 text-secondary">Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="d-none d-lg-block col-lg-2">
                <p class="mb-0 lead fw-bold text-info">$29.89</p>
                <span class="small text-secondary text-decoration-line-through">$33.69</span>
              </div>
              <div class="col-auto col-md-2">
                <div class="d-inline-flex align-items-center px-4 fw-bold text-secondary border rounded-2">
                  <button class="btn px-0 py-2">
                    <svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                  </button>
                  <input class="form-control px-2 py-4 text-center text-md-end border-0" style="width: 48px;" type="number" placeholder="1">
                  <button class="btn px-0 py-2">
                    <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                  </button>
                </div>
              </div>
              <div class="col-auto col-md-2 text-end">
                <p class="lead fw-bold text-info">$29.89</p>
              </div>
            </div>
          </div>
          <div class="d-flex flex-wrap flex-md-nowrap align-items-center mb-lg-n4">
            <span class="flex-shrink-0 me-12 mb-4 mb-lg-0 fw-bold">Apply discount code:</span>
            <input class="form-control me-6 mb-4 mb-lg-0 px-8 py-4 fw-bold border" type="text" placeholder="SUMMER30X">
            <a class="flex-shrink-0 btn btn-sm btn-dark" href="#">Apply</a>
          </div>
        </div>
        <div class="col-12 col-xl-4">
          <div class="p-6 p-md-12 bg-info">
            <h3 class="mb-6 text-white">Cart totals</h3>
            <div class="d-flex mb-8 align-items-center justify-content-between pb-5 border-bottom border-info-light">
              <span class="text-light">Subtotal</span>
              <span class="lead fw-bold text-white">$89.67</span>
            </div>
            <h4 class="mb-2 lead fw-bold text-white">Shipping</h4>
            <div class="d-flex mb-2 justify-content-between align-items-center">
              <span class="text-light">Next day</span>
              <span class="lead fw-bold text-white">$11.00</span>
            </div>
            <div class="d-flex mb-10 justify-content-between align-items-center">
              <span class="text-light">Shipping to United States</span>
              <span class="lead fw-bold text-white">-</span>
            </div>
            <div class="d-flex mb-10 justify-content-between align-items-center">
              <span class="lead fw-bold text-white">Order total</span>
              <span class="lead fw-bold text-white">$100.67</span>
            </div>
            <a class="btn btn-primary w-100 text-uppercase" href="#">Go to Checkout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>