Shopping carts

Bootstrap 5 Shopping Carts component

Responsive Shopping Cart & checkout templates built with Bootstrap 5. Multiple examples of various product summary & payment review designs. Ready to use pages and templates.

Basic shopping cart template

A basic shopping card template with purchased products listing using product cards, payment form with credit card inputs fields and an avatar in the upper right corner - indicating that the user is already logged into his profile.

Continue shopping

Shopping cart

You have 4 items in your cart

Sort by: price

Shopping item
Iphone 11 pro

256GB, Navy Blue

2
$900
Shopping item
Samsung galaxy Note 10

256GB, Navy Blue

2
$900
Shopping item
Canon EOS M50

Onyx Black

1
$1199
Shopping item
MacBook Pro

1TB, Graphite

1
$1799
Card details
Avatar

Card type


Subtotal

$4798.00

Shipping

$20.00

Total(Incl. taxes)

$4818.00

        
            
          <section class="h-100 h-custom" style="background-color: #eee;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col">
                  <div class="card">
                    <div class="card-body p-4">

                      <div class="row">

                        <div class="col-lg-7">
                          <h5 class="mb-3"><a href="#!" class="text-body"><i
                                class="fas fa-long-arrow-alt-left me-2"></i>Continue shopping</a></h5>
                          <hr>

                          <div class="d-flex justify-content-between align-items-center mb-4">
                            <div>
                              <p class="mb-1">Shopping cart</p>
                              <p class="mb-0">You have 4 items in your cart</p>
                            </div>
                            <div>
                              <p class="mb-0"><span class="text-muted">Sort by:</span> <a href="#!"
                                  class="text-body">price <i class="fas fa-angle-down mt-1"></i></a></p>
                            </div>
                          </div>

                          <div class="card mb-3">
                            <div class="card-body">
                              <div class="d-flex justify-content-between">
                                <div class="d-flex flex-row align-items-center">
                                  <div>
                                    <img
                                      src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
                                      class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
                                  </div>
                                  <div class="ms-3">
                                    <h5>Iphone 11 pro</h5>
                                    <p class="small mb-0">256GB, Navy Blue</p>
                                  </div>
                                </div>
                                <div class="d-flex flex-row align-items-center">
                                  <div style="width: 50px;">
                                    <h5 class="fw-normal mb-0">2</h5>
                                  </div>
                                  <div style="width: 80px;">
                                    <h5 class="mb-0">$900</h5>
                                  </div>
                                  <a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="card mb-3">
                            <div class="card-body">
                              <div class="d-flex justify-content-between">
                                <div class="d-flex flex-row align-items-center">
                                  <div>
                                    <img
                                      src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img2.webp"
                                      class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
                                  </div>
                                  <div class="ms-3">
                                    <h5>Samsung galaxy Note 10 </h5>
                                    <p class="small mb-0">256GB, Navy Blue</p>
                                  </div>
                                </div>
                                <div class="d-flex flex-row align-items-center">
                                  <div style="width: 50px;">
                                    <h5 class="fw-normal mb-0">2</h5>
                                  </div>
                                  <div style="width: 80px;">
                                    <h5 class="mb-0">$900</h5>
                                  </div>
                                  <a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="card mb-3">
                            <div class="card-body">
                              <div class="d-flex justify-content-between">
                                <div class="d-flex flex-row align-items-center">
                                  <div>
                                    <img
                                      src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img3.webp"
                                      class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
                                  </div>
                                  <div class="ms-3">
                                    <h5>Canon EOS M50</h5>
                                    <p class="small mb-0">Onyx Black</p>
                                  </div>
                                </div>
                                <div class="d-flex flex-row align-items-center">
                                  <div style="width: 50px;">
                                    <h5 class="fw-normal mb-0">1</h5>
                                  </div>
                                  <div style="width: 80px;">
                                    <h5 class="mb-0">$1199</h5>
                                  </div>
                                  <a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="card mb-3 mb-lg-0">
                            <div class="card-body">
                              <div class="d-flex justify-content-between">
                                <div class="d-flex flex-row align-items-center">
                                  <div>
                                    <img
                                      src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img4.webp"
                                      class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
                                  </div>
                                  <div class="ms-3">
                                    <h5>MacBook Pro</h5>
                                    <p class="small mb-0">1TB, Graphite</p>
                                  </div>
                                </div>
                                <div class="d-flex flex-row align-items-center">
                                  <div style="width: 50px;">
                                    <h5 class="fw-normal mb-0">1</h5>
                                  </div>
                                  <div style="width: 80px;">
                                    <h5 class="mb-0">$1799</h5>
                                  </div>
                                  <a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
                                </div>
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="col-lg-5">

                          <div class="card bg-primary text-white rounded-3">
                            <div class="card-body">
                              <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="mb-0">Card details</h5>
                                <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
                                  class="img-fluid rounded-3" style="width: 45px;" alt="Avatar">
                              </div>

                              <p class="small mb-2">Card type</p>
                              <a href="#!" type="submit" class="text-white"><i
                                  class="fab fa-cc-mastercard fa-2x me-2"></i></a>
                              <a href="#!" type="submit" class="text-white"><i
                                  class="fab fa-cc-visa fa-2x me-2"></i></a>
                              <a href="#!" type="submit" class="text-white"><i
                                  class="fab fa-cc-amex fa-2x me-2"></i></a>
                              <a href="#!" type="submit" class="text-white"><i class="fab fa-cc-paypal fa-2x"></i></a>

                              <form class="mt-4">
                                <div data-mdb-input-init class="form-outline form-white mb-4">
                                  <input type="text" id="typeName" class="form-control form-control-lg" siez="17"
                                    placeholder="Cardholder's Name" />
                                  <label class="form-label" for="typeName">Cardholder's Name</label>
                                </div>

                                <div data-mdb-input-init class="form-outline form-white mb-4">
                                  <input type="text" id="typeText" class="form-control form-control-lg" siez="17"
                                    placeholder="1234 5678 9012 3457" minlength="19" maxlength="19" />
                                  <label class="form-label" for="typeText">Card Number</label>
                                </div>

                                <div class="row mb-4">
                                  <div class="col-md-6">
                                    <div data-mdb-input-init class="form-outline form-white">
                                      <input type="text" id="typeExp" class="form-control form-control-lg"
                                        placeholder="MM/YYYY" size="7" id="exp" minlength="7" maxlength="7" />
                                      <label class="form-label" for="typeExp">Expiration</label>
                                    </div>
                                  </div>
                                  <div class="col-md-6">
                                    <div data-mdb-input-init class="form-outline form-white">
                                      <input type="password" id="typeText" class="form-control form-control-lg"
                                        placeholder="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3" />
                                      <label class="form-label" for="typeText">Cvv</label>
                                    </div>
                                  </div>
                                </div>

                              </form>

                              <hr class="my-4">

                              <div class="d-flex justify-content-between">
                                <p class="mb-2">Subtotal</p>
                                <p class="mb-2">$4798.00</p>
                              </div>

                              <div class="d-flex justify-content-between">
                                <p class="mb-2">Shipping</p>
                                <p class="mb-2">$20.00</p>
                              </div>

                              <div class="d-flex justify-content-between mb-4">
                                <p class="mb-2">Total(Incl. taxes)</p>
                                <p class="mb-2">$4818.00</p>
                              </div>

                              <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-block btn-lg">
                                <div class="d-flex justify-content-between">
                                  <span>$4818.00</span>
                                  <span>Checkout <i class="fas fa-long-arrow-alt-right ms-2"></i></span>
                                </div>
                              </button>

                            </div>
                          </div>

                        </div>

                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          @media (min-width: 1025px) {
          .h-custom {
          height: 100vh !important;
          }
          }
          
        
    

Shopping cart template with quantity edit

In the example below the user can change the quantity of purchased products using the numeric input. This template is equipped with a register button - for cases in which the user needs to go trough new account registration or log into an existing account before he completes the purchase. You can of course replace this with a "Next step" button leading straight to the payment step.

Shopping Cart

3 items

Cotton T-shirt
Shirt
Cotton T-shirt
€ 44.00

Cotton T-shirt
Shirt
Cotton T-shirt
€ 44.00

Cotton T-shirt
Shirt
Cotton T-shirt
€ 44.00

Summary


items 3
€ 132.00
Shipping
Give code

Total price
€ 137.00
        
            
          <section class="h-100 h-custom" style="background-color: #d2c9ff;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-12">
                  <div class="card card-registration card-registration-2" style="border-radius: 15px;">
                    <div class="card-body p-0">
                      <div class="row g-0">
                        <div class="col-lg-8">
                          <div class="p-5">
                            <div class="d-flex justify-content-between align-items-center mb-5">
                              <h1 class="fw-bold mb-0">Shopping Cart</h1>
                              <h6 class="mb-0 text-muted">3 items</h6>
                            </div>
                            <hr class="my-4">

                            <div class="row mb-4 d-flex justify-content-between align-items-center">
                              <div class="col-md-2 col-lg-2 col-xl-2">
                                <img
                                  src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img5.webp"
                                  class="img-fluid rounded-3" alt="Cotton T-shirt">
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-3">
                                <h6 class="text-muted">Shirt</h6>
                                <h6 class="mb-0">Cotton T-shirt</h6>
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                                <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                  onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                  <i class="fas fa-minus"></i>
                                </button>

                                <input id="form1" min="0" name="quantity" value="1" type="number"
                                  class="form-control form-control-sm" />

                                <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                  onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                  <i class="fas fa-plus"></i>
                                </button>
                              </div>
                              <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                                <h6 class="mb-0">€ 44.00</h6>
                              </div>
                              <div class="col-md-1 col-lg-1 col-xl-1 text-end">
                                <a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
                              </div>
                            </div>

                            <hr class="my-4">

                            <div class="row mb-4 d-flex justify-content-between align-items-center">
                              <div class="col-md-2 col-lg-2 col-xl-2">
                                <img
                                  src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img6.webp"
                                  class="img-fluid rounded-3" alt="Cotton T-shirt">
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-3">
                                <h6 class="text-muted">Shirt</h6>
                                <h6 class="mb-0">Cotton T-shirt</h6>
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                                <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                  onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                  <i class="fas fa-minus"></i>
                                </button>

                                <input id="form1" min="0" name="quantity" value="1" type="number"
                                  class="form-control form-control-sm" />

                                <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                  onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                  <i class="fas fa-plus"></i>
                                </button>
                              </div>
                              <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                                <h6 class="mb-0">€ 44.00</h6>
                              </div>
                              <div class="col-md-1 col-lg-1 col-xl-1 text-end">
                                <a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
                              </div>
                            </div>

                            <hr class="my-4">

                            <div class="row mb-4 d-flex justify-content-between align-items-center">
                              <div class="col-md-2 col-lg-2 col-xl-2">
                                <img
                                  src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img7.webp"
                                  class="img-fluid rounded-3" alt="Cotton T-shirt">
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-3">
                                <h6 class="text-muted">Shirt</h6>
                                <h6 class="mb-0">Cotton T-shirt</h6>
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                                <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                  onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                  <i class="fas fa-minus"></i>
                                </button>

                                <input id="form1" min="0" name="quantity" value="1" type="number"
                                  class="form-control form-control-sm" />

                                <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                  onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                  <i class="fas fa-plus"></i>
                                </button>
                              </div>
                              <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                                <h6 class="mb-0">€ 44.00</h6>
                              </div>
                              <div class="col-md-1 col-lg-1 col-xl-1 text-end">
                                <a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
                              </div>
                            </div>

                            <hr class="my-4">

                            <div class="pt-5">
                              <h6 class="mb-0"><a href="#!" class="text-body"><i
                                    class="fas fa-long-arrow-alt-left me-2"></i>Back to shop</a></h6>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 bg-body-tertiary">
                          <div class="p-5">
                            <h3 class="fw-bold mb-5 mt-2 pt-1">Summary</h3>
                            <hr class="my-4">

                            <div class="d-flex justify-content-between mb-4">
                              <h5 class="text-uppercase">items 3</h5>
                              <h5>€ 132.00</h5>
                            </div>

                            <h5 class="text-uppercase mb-3">Shipping</h5>

                            <div class="mb-4 pb-2">
                              <select data-mdb-select-init>
                                <option value="1">Standard-Delivery- €5.00</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                                <option value="4">Four</option>
                              </select>
                            </div>

                            <h5 class="text-uppercase mb-3">Give code</h5>

                            <div class="mb-5">
                              <div data-mdb-input-init class="form-outline">
                                <input type="text" id="form3Examplea2" class="form-control form-control-lg" />
                                <label class="form-label" for="form3Examplea2">Enter your code</label>
                              </div>
                            </div>

                            <hr class="my-4">

                            <div class="d-flex justify-content-between mb-5">
                              <h5 class="text-uppercase">Total price</h5>
                              <h5>€ 137.00</h5>
                            </div>

                            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-dark btn-block btn-lg"
                              data-mdb-ripple-color="dark">Register</button>

                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          @media (min-width: 1025px) {
          .h-custom {
          height: 100vh !important;
          }
          }

          .card-registration .select-input.form-control[readonly]:not([disabled]) {
          font-size: 1rem;
          line-height: 2.15;
          padding-left: .75em;
          padding-right: .75em;
          }

          .card-registration .select-arrow {
          top: 13px;
          }
          
        
    

Shopping cart page with payment methods

The example below is based on a subtle gradient background and includes a card with accepted credit card providers.

Cart - 2 items

Blue denim shirt

Color: blue

Size: M

$17.99


Red hoodie

Color: red

Size: M

$17.99

Expected shipping delivery

12.10.2020 - 14.10.2020

We accept

Visa American Express Mastercard PayPal acceptance mark
Summary
  • Products $53.98
  • Shipping Gratis
  • Total amount

    (including VAT)

    $53.98
        
            
          <section class="h-100 gradient-custom">
            <div class="container py-5">
              <div class="row d-flex justify-content-center my-4">
                <div class="col-md-8">
                  <div class="card mb-4">
                    <div class="card-header py-3">
                      <h5 class="mb-0">Cart - 2 items</h5>
                    </div>
                    <div class="card-body">
                      <!-- Single item -->
                      <div class="row">
                        <div class="col-lg-3 col-md-12 mb-4 mb-lg-0">
                          <!-- Image -->
                          <div class="bg-image hover-overlay hover-zoom ripple rounded" data-mdb-ripple-color="light">
                            <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
                              class="w-100" alt="Blue Jeans Jacket" />
                            <a href="#!">
                              <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
                            </a>
                          </div>
                          <!-- Image -->
                        </div>

                        <div class="col-lg-5 col-md-6 mb-4 mb-lg-0">
                          <!-- Data -->
                          <p><strong>Blue denim shirt</strong></p>
                          <p>Color: blue</p>
                          <p>Size: M</p>
                          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-sm me-1 mb-2" data-mdb-tooltip-init
                            title="Remove item">
                            <i class="fas fa-trash"></i>
                          </button>
                          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger btn-sm mb-2" data-mdb-tooltip-init
                            title="Move to the wish list">
                            <i class="fas fa-heart"></i>
                          </button>
                          <!-- Data -->
                        </div>

                        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                          <!-- Quantity -->
                          <div class="d-flex mb-4" style="max-width: 300px">
                            <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 me-2"
                              onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                              <i class="fas fa-minus"></i>
                            </button>

                            <div data-mdb-input-init class="form-outline">
                              <input id="form1" min="0" name="quantity" value="1" type="number" class="form-control" />
                              <label class="form-label" for="form1">Quantity</label>
                            </div>

                            <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 ms-2"
                              onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                              <i class="fas fa-plus"></i>
                            </button>
                          </div>
                          <!-- Quantity -->

                          <!-- Price -->
                          <p class="text-start text-md-center">
                            <strong>$17.99</strong>
                          </p>
                          <!-- Price -->
                        </div>
                      </div>
                      <!-- Single item -->

                      <hr class="my-4" />

                      <!-- Single item -->
                      <div class="row">
                        <div class="col-lg-3 col-md-12 mb-4 mb-lg-0">
                          <!-- Image -->
                          <div class="bg-image hover-overlay hover-zoom ripple rounded" data-mdb-ripple-color="light">
                            <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
                              class="w-100" />
                            <a href="#!">
                              <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
                            </a>
                          </div>
                          <!-- Image -->
                        </div>

                        <div class="col-lg-5 col-md-6 mb-4 mb-lg-0">
                          <!-- Data -->
                          <p><strong>Red hoodie</strong></p>
                          <p>Color: red</p>
                          <p>Size: M</p>

                          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-sm me-1 mb-2" data-mdb-tooltip-init
                            title="Remove item">
                            <i class="fas fa-trash"></i>
                          </button>
                          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger btn-sm mb-2" data-mdb-tooltip-init
                            title="Move to the wish list">
                            <i class="fas fa-heart"></i>
                          </button>
                          <!-- Data -->
                        </div>

                        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                          <!-- Quantity -->
                          <div class="d-flex mb-4" style="max-width: 300px">
                            <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 me-2"
                              onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                              <i class="fas fa-minus"></i>
                            </button>

                            <div data-mdb-input-init class="form-outline">
                              <input id="form1" min="0" name="quantity" value="1" type="number" class="form-control" />
                              <label class="form-label" for="form1">Quantity</label>
                            </div>

                            <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 ms-2"
                              onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                              <i class="fas fa-plus"></i>
                            </button>
                          </div>
                          <!-- Quantity -->

                          <!-- Price -->
                          <p class="text-start text-md-center">
                            <strong>$17.99</strong>
                          </p>
                          <!-- Price -->
                        </div>
                      </div>
                      <!-- Single item -->
                    </div>
                  </div>
                  <div class="card mb-4">
                    <div class="card-body">
                      <p><strong>Expected shipping delivery</strong></p>
                      <p class="mb-0">12.10.2020 - 14.10.2020</p>
                    </div>
                  </div>
                  <div class="card mb-4 mb-lg-0">
                    <div class="card-body">
                      <p><strong>We accept</strong></p>
                      <img class="me-2" width="45px"
                        src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce-gateway-stripe/assets/images/visa.svg"
                        alt="Visa" />
                      <img class="me-2" width="45px"
                        src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce-gateway-stripe/assets/images/amex.svg"
                        alt="American Express" />
                      <img class="me-2" width="45px"
                        src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce-gateway-stripe/assets/images/mastercard.svg"
                        alt="Mastercard" />
                      <img class="me-2" width="45px"
                        src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.webp"
                        alt="PayPal acceptance mark" />
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card mb-4">
                    <div class="card-header py-3">
                      <h5 class="mb-0">Summary</h5>
                    </div>
                    <div class="card-body">
                      <ul class="list-group list-group-flush">
                        <li
                          class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
                          Products
                          <span>$53.98</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                          Shipping
                          <span>Gratis</span>
                        </li>
                        <li
                          class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
                          <div>
                            <strong>Total amount</strong>
                            <strong>
                              <p class="mb-0">(including VAT)</p>
                            </strong>
                          </div>
                          <span><strong>$53.98</strong></span>
                        </li>
                      </ul>

                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg btn-block">
                        Go to checkout
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .gradient-custom {
          /* fallback for old browsers */
          background: #6a11cb;

          /* Chrome 10-25, Safari 5.1-6 */
          background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));

          /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
          background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
          }
          
        
    

Shopping cart with product cards

The shopping cart page template below includes a list of purchased products created with product cards with an delete icon button, as well as an input field for the discount code.

Shopping Cart

Sort by: price

Cotton T-shirt

Basic T-shirt

Size: M Color: Grey

$499.00
Cotton T-shirt

Basic T-shirt

Size: M Color: Grey

$499.00
Cotton T-shirt

Basic T-shirt

Size: M Color: Grey

$499.00
Cotton T-shirt

Basic T-shirt

Size: M Color: Grey

$499.00
        
            
          <section class="h-100">
            <div class="container h-100 py-5">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-10">

                  <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="fw-normal mb-0">Shopping Cart</h3>
                    <div>
                      <p class="mb-0"><span class="text-muted">Sort by:</span> <a href="#!" class="text-body">price <i
                            class="fas fa-angle-down mt-1"></i></a></p>
                    </div>
                  </div>

                  <div class="card rounded-3 mb-4">
                    <div class="card-body p-4">
                      <div class="row d-flex justify-content-between align-items-center">
                        <div class="col-md-2 col-lg-2 col-xl-2">
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
                            class="img-fluid rounded-3" alt="Cotton T-shirt">
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-3">
                          <p class="lead fw-normal mb-2">Basic T-shirt</p>
                          <p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                            <i class="fas fa-minus"></i>
                          </button>

                          <input id="form1" min="0" name="quantity" value="2" type="number"
                            class="form-control form-control-sm" />

                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                            <i class="fas fa-plus"></i>
                          </button>
                        </div>
                        <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                          <h5 class="mb-0">$499.00</h5>
                        </div>
                        <div class="col-md-1 col-lg-1 col-xl-1 text-end">
                          <a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card rounded-3 mb-4">
                    <div class="card-body p-4">
                      <div class="row d-flex justify-content-between align-items-center">
                        <div class="col-md-2 col-lg-2 col-xl-2">
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
                            class="img-fluid rounded-3" alt="Cotton T-shirt">
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-3">
                          <p class="lead fw-normal mb-2">Basic T-shirt</p>
                          <p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                            <i class="fas fa-minus"></i>
                          </button>

                          <input id="form1" min="0" name="quantity" value="2" type="number"
                            class="form-control form-control-sm" />

                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                            <i class="fas fa-plus"></i>
                          </button>
                        </div>
                        <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                          <h5 class="mb-0">$499.00</h5>
                        </div>
                        <div class="col-md-1 col-lg-1 col-xl-1 text-end">
                          <a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card rounded-3 mb-4">
                    <div class="card-body p-4">
                      <div class="row d-flex justify-content-between align-items-center">
                        <div class="col-md-2 col-lg-2 col-xl-2">
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
                            class="img-fluid rounded-3" alt="Cotton T-shirt">
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-3">
                          <p class="lead fw-normal mb-2">Basic T-shirt</p>
                          <p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                            <i class="fas fa-minus"></i>
                          </button>

                          <input id="form1" min="0" name="quantity" value="2" type="number"
                            class="form-control form-control-sm" />

                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                            <i class="fas fa-plus"></i>
                          </button>
                        </div>
                        <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                          <h5 class="mb-0">$499.00</h5>
                        </div>
                        <div class="col-md-1 col-lg-1 col-xl-1 text-end">
                          <a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card rounded-3 mb-4">
                    <div class="card-body p-4">
                      <div class="row d-flex justify-content-between align-items-center">
                        <div class="col-md-2 col-lg-2 col-xl-2">
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
                            class="img-fluid rounded-3" alt="Cotton T-shirt">
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-3">
                          <p class="lead fw-normal mb-2">Basic T-shirt</p>
                          <p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
                        </div>
                        <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                            <i class="fas fa-minus"></i>
                          </button>

                          <input id="form1" min="0" name="quantity" value="2" type="number"
                            class="form-control form-control-sm" />

                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                            onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                            <i class="fas fa-plus"></i>
                          </button>
                        </div>
                        <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
                          <h5 class="mb-0">$499.00</h5>
                        </div>
                        <div class="col-md-1 col-lg-1 col-xl-1 text-end">
                          <a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card mb-4">
                    <div class="card-body p-4 d-flex flex-row">
                      <div data-mdb-input-init class="form-outline flex-fill">
                        <input type="text" id="form1" class="form-control form-control-lg" />
                        <label class="form-label" for="form1">Discound code</label>
                      </div>
                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-warning btn-lg ms-3">Apply</button>
                    </div>
                  </div>

                  <div class="card">
                    <div class="card-body">
                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-warning btn-block btn-lg">Proceed to Pay</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </section>
          
        
    

Shopping cart checkout

The example below combines a shopping cart and a checkout in a single template. You can both edit your purchased products as well as credit card forms for setting up the payment.

Your products

Generic placeholder image
Samsung Galaxy M11 64GB
Color: white

799$

Generic placeholder image
Headphones Bose 35 II
Color: Red

239$

Generic placeholder image
iPad 9.7 6-gen WiFi 32GB
Color: rose pink

659$


Discount:

95$

Total:
2261$

Payment

Lorem ipsum dolor sit amet consectetur, adipisicing elit obcaecati sapiente.

Back to shopping
        
            
          <section class="h-100 h-custom" style="background-color: #eee;">
            <div class="container h-100 py-5">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col">
                  <div class="card shopping-cart" style="border-radius: 15px;">
                    <div class="card-body">

                      <div class="row">
                        <div class="col-lg-6 px-5 py-4">

                          <h3 class="mb-5 pt-2 text-center fw-bold text-uppercase">Your products</h3>

                          <div class="d-flex align-items-center mb-5">
                            <div class="flex-shrink-0">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/13.webp"
                                class="img-fluid" style="width: 150px;" alt="Generic placeholder image">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <a href="#!" class="float-end"><i class="fas fa-times"></i></a>
                              <h5 class="text-primary">Samsung Galaxy M11 64GB</h5>
                              <h6 style="color: #9e9e9e;">Color: white</h6>
                              <div class="d-flex align-items-center">
                                <p class="fw-bold mb-0 me-5 pe-3">799$</p>
                                <div class="def-number-input number-input safari_only">
                                  <button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                  <input class="quantity fw-bold bg-body-tertiary text-body" min="0" name="quantity" value="1"
                                    type="number">
                                  <button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                    class="plus"></button>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="d-flex align-items-center mb-5">
                            <div class="flex-shrink-0">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/6.webp"
                                class="img-fluid" style="width: 150px;" alt="Generic placeholder image">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <a href="#!" class="float-end"><i class="fas fa-times"></i></a>
                              <h5 class="text-primary">Headphones Bose 35 II</h5>
                              <h6 style="color: #9e9e9e;">Color: Red</h6>
                              <div class="d-flex align-items-center">
                                <p class="fw-bold mb-0 me-5 pe-3">239$</p>
                                <div class="def-number-input number-input safari_only">
                                  <button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                  <input class="quantity fw-bold bg-body-tertiary text-body" min="0" name="quantity" value="1"
                                    type="number">
                                  <button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                    class="plus"></button>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="d-flex align-items-center mb-5">
                            <div class="flex-shrink-0">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/1.webp"
                                class="img-fluid" style="width: 150px;" alt="Generic placeholder image">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <a href="#!" class="float-end"><i class="fas fa-times"></i></a>
                              <h5 class="text-primary">iPad 9.7 6-gen WiFi 32GB</h5>
                              <h6 style="color: #9e9e9e;">Color: rose pink</h6>
                              <div class="d-flex align-items-center">
                                <p class="fw-bold mb-0 me-5 pe-3">659$</p>
                                <div class="def-number-input number-input safari_only">
                                  <button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                  <input class="quantity fw-bold bg-body-tertiary text-body" min="0" name="quantity" value="2"
                                    type="number">
                                  <button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                    class="plus"></button>
                                </div>
                              </div>
                            </div>
                          </div>

                          <hr class="mb-4" style="height: 2px; background-color: #1266f1; opacity: 1;">

                          <div class="d-flex justify-content-between px-x">
                            <p class="fw-bold">Discount:</p>
                            <p class="fw-bold">95$</p>
                          </div>
                          <div class="d-flex justify-content-between p-2 mb-2 bg-primary">
                            <h5 class="fw-bold mb-0">Total:</h5>
                            <h5 class="fw-bold mb-0">2261$</h5>
                          </div>

                        </div>
                        <div class="col-lg-6 px-5 py-4">

                          <h3 class="mb-5 pt-2 text-center fw-bold text-uppercase">Payment</h3>

                          <form class="mb-5">

                            <div data-mdb-input-init class="form-outline mb-5">
                              <input type="text" id="typeText" class="form-control form-control-lg" siez="17"
                                value="1234 5678 9012 3457" minlength="19" maxlength="19" />
                              <label class="form-label" for="typeText">Card Number</label>
                            </div>

                            <div data-mdb-input-init class="form-outline mb-5">
                              <input type="text" id="typeName" class="form-control form-control-lg" siez="17"
                                value="John Smith" />
                              <label class="form-label" for="typeName">Name on card</label>
                            </div>

                            <div class="row">
                              <div class="col-md-6 mb-5">
                                <div data-mdb-input-init class="form-outline">
                                  <input type="text" id="typeExp" class="form-control form-control-lg" value="01/22"
                                    size="7" id="exp" minlength="7" maxlength="7" />
                                  <label class="form-label" for="typeExp">Expiration</label>
                                </div>
                              </div>
                              <div class="col-md-6 mb-5">
                                <div data-mdb-input-init class="form-outline">
                                  <input type="password" id="typeText" class="form-control form-control-lg"
                                    value="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3" />
                                  <label class="form-label" for="typeText">Cvv</label>
                                </div>
                              </div>
                            </div>

                            <p class="mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit <a
                                href="#!">obcaecati sapiente</a>.</p>

                            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block btn-lg">Buy now</button>

                            <h5 class="fw-bold mb-5" style="position: absolute; bottom: 0;">
                              <a href="#!"><i class="fas fa-angle-left me-2"></i>Back to shopping</a>
                            </h5>

                          </form>

                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          @media (min-width: 1025px) {
          .h-custom {
          height: 100vh !important;
          }
          }

          .number-input input[type="number"] {
          -webkit-appearance: textfield;
          -moz-appearance: textfield;
          appearance: textfield;
          }

          .number-input input[type=number]::-webkit-inner-spin-button,
          .number-input input[type=number]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          }

          .number-input button {
          -webkit-appearance: none;
          background-color: transparent;
          border: none;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin: 0;
          position: relative;
          }

          .number-input button:before,
          .number-input button:after {
          display: inline-block;
          position: absolute;
          content: '';
          height: 2px;
          transform: translate(-50%, -50%);
          }

          .number-input button.plus:after {
          transform: translate(-50%, -50%) rotate(90deg);
          }

          .number-input input[type=number] {
          text-align: center;
          }

          .number-input.number-input {
          border: 1px solid #ced4da;
          width: 10rem;
          border-radius: .25rem;
          }

          .number-input.number-input button {
          width: 2.6rem;
          height: .7rem;
          }

          .number-input.number-input button.minus {
          padding-left: 10px;
          }

          .number-input.number-input button:before,
          .number-input.number-input button:after {
          width: .7rem;
          background-color: #495057;
          }

          .number-input.number-input input[type=number] {
          max-width: 4rem;
          padding: .5rem;
          border: 1px solid #ced4da;
          border-width: 0 1px;
          font-size: 1rem;
          height: 2rem;
          color: #495057;
          }

          @media not all and (min-resolution:.001dpcm) {
          @supports (-webkit-appearance: none) and (stroke-color:transparent) {

          .number-input.def-number-input.safari_only button:before,
          .number-input.def-number-input.safari_only button:after {
          margin-top: -.3rem;
          }
          }
          }

          .shopping-cart .def-number-input.number-input {
          border: none;
          }

          .shopping-cart .def-number-input.number-input input[type=number] {
          max-width: 2rem;
          border: none;
          }

          .shopping-cart .def-number-input.number-input input[type=number].black-text,
          .shopping-cart .def-number-input.number-input input.btn.btn-link[type=number],
          .shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:hover,
          .shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:focus {
          color: #212529 !important;
          }

          .shopping-cart .def-number-input.number-input button {
          width: 1rem;
          }

          .shopping-cart .def-number-input.number-input button:before,
          .shopping-cart .def-number-input.number-input button:after {
          width: .5rem;
          }

          .shopping-cart .def-number-input.number-input button.minus:before,
          .shopping-cart .def-number-input.number-input button.minus:after {
          background-color: #9e9e9e;
          }

          .shopping-cart .def-number-input.number-input button.plus:before,
          .shopping-cart .def-number-input.number-input button.plus:after {
          background-color: #4285f4;
          }
          
        
    

Shopping cart review page

This shopping cart example includes an additional column for the final review of the product color.

Shopping Cart (1 item in your cart)

Generic placeholder image

Name

iPad Air

Color

pink rose

Quantity

1

Price

$799

Total

$799

Order total: $799

        
            
          <section class="vh-100" style="background-color: #fdccbc;">
            <div class="container h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col">
                  <p><span class="h2">Shopping Cart </span><span class="h4">(1 item in your cart)</span></p>

                  <div class="card mb-4">
                    <div class="card-body p-4">

                      <div class="row align-items-center">
                        <div class="col-md-2">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/1.webp"
                            class="img-fluid" alt="Generic placeholder image">
                        </div>
                        <div class="col-md-2 d-flex justify-content-center">
                          <div>
                            <p class="small text-muted mb-4 pb-2">Name</p>
                            <p class="lead fw-normal mb-0">iPad Air</p>
                          </div>
                        </div>
                        <div class="col-md-2 d-flex justify-content-center">
                          <div>
                            <p class="small text-muted mb-4 pb-2">Color</p>
                            <p class="lead fw-normal mb-0"><i class="fas fa-circle me-2" style="color: #fdd8d2;"></i>
                              pink rose</p>
                          </div>
                        </div>
                        <div class="col-md-2 d-flex justify-content-center">
                          <div>
                            <p class="small text-muted mb-4 pb-2">Quantity</p>
                            <p class="lead fw-normal mb-0">1</p>
                          </div>
                        </div>
                        <div class="col-md-2 d-flex justify-content-center">
                          <div>
                            <p class="small text-muted mb-4 pb-2">Price</p>
                            <p class="lead fw-normal mb-0">$799</p>
                          </div>
                        </div>
                        <div class="col-md-2 d-flex justify-content-center">
                          <div>
                            <p class="small text-muted mb-4 pb-2">Total</p>
                            <p class="lead fw-normal mb-0">$799</p>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>

                  <div class="card mb-5">
                    <div class="card-body p-4">

                      <div class="float-end">
                        <p class="mb-0 me-5 d-flex align-items-center">
                          <span class="small text-muted me-2">Order total:</span> <span
                            class="lead fw-normal">$799</span>
                        </p>
                      </div>

                    </div>
                  </div>

                  <div class="d-flex justify-content-end">
                    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light btn-lg me-2">Continue shopping</button>
                    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg">Add to cart</button>
                  </div>

                </div>
              </div>
            </div>
          </section>
          
        
    

Shopping cart summary page

Another template combining both shopping cart and checkout on a single page providing an extensive summary o purchased products, subtotals, shipping cost and total price.

Shopping Bag Format Quantity Price
Book

Thinking, Fast and Slow

Daniel Kahneman

Digital

$9.99

Book

Homo Deus: A Brief History of Tomorrow

Yuval Noah Harari

Paperback

$13.50

Credit Card

Debit Card

PayPal

Subtotal

$23.49

Shipping

$2.99


Total (tax included)

$26.48

        
            
          <section class="h-100 h-custom">
            <div class="container h-100 py-5">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col">

                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col" class="h5">Shopping Bag</th>
                          <th scope="col">Format</th>
                          <th scope="col">Quantity</th>
                          <th scope="col">Price</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">
                            <div class="d-flex align-items-center">
                              <img src="https://i.imgur.com/2DsA49b.webp" class="img-fluid rounded-3"
                                style="width: 120px;" alt="Book">
                              <div class="flex-column ms-4">
                                <p class="mb-2">Thinking, Fast and Slow</p>
                                <p class="mb-0">Daniel Kahneman</p>
                              </div>
                            </div>
                          </th>
                          <td class="align-middle">
                            <p class="mb-0" style="font-weight: 500;">Digital</p>
                          </td>
                          <td class="align-middle">
                            <div class="d-flex flex-row">
                              <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                <i class="fas fa-minus"></i>
                              </button>

                              <input id="form1" min="0" name="quantity" value="2" type="number"
                                class="form-control form-control-sm" style="width: 50px;" />

                              <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                <i class="fas fa-plus"></i>
                              </button>
                            </div>
                          </td>
                          <td class="align-middle">
                            <p class="mb-0" style="font-weight: 500;">$9.99</p>
                          </td>
                        </tr>
                        <tr>
                          <th scope="row" class="border-bottom-0">
                            <div class="d-flex align-items-center">
                              <img src="https://i.imgur.com/Oj1iQUX.webp" class="img-fluid rounded-3"
                                style="width: 120px;" alt="Book">
                              <div class="flex-column ms-4">
                                <p class="mb-2">Homo Deus: A Brief History of Tomorrow</p>
                                <p class="mb-0">Yuval Noah Harari</p>
                              </div>
                            </div>
                          </th>
                          <td class="align-middle border-bottom-0">
                            <p class="mb-0" style="font-weight: 500;">Paperback</p>
                          </td>
                          <td class="align-middle border-bottom-0">
                            <div class="d-flex flex-row">
                              <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                <i class="fas fa-minus"></i>
                              </button>

                              <input id="form1" min="0" name="quantity" value="1" type="number"
                                class="form-control form-control-sm" style="width: 50px;" />

                              <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
                                onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                <i class="fas fa-plus"></i>
                              </button>
                            </div>
                          </td>
                          <td class="align-middle border-bottom-0">
                            <p class="mb-0" style="font-weight: 500;">$13.50</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <div class="card shadow-2-strong mb-5 mb-lg-0" style="border-radius: 16px;">
                    <div class="card-body p-4">

                      <div class="row">
                        <div class="col-md-6 col-lg-4 col-xl-3 mb-4 mb-md-0">
                          <form>
                            <div class="d-flex flex-row pb-3">
                              <div class="d-flex align-items-center pe-2">
                                <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1v"
                                  value="" aria-label="..." checked />
                              </div>
                              <div class="rounded border w-100 p-3">
                                <p class="d-flex align-items-center mb-0">
                                  <i class="fab fa-cc-mastercard fa-2x text-body pe-2"></i>Credit
                                  Card
                                </p>
                              </div>
                            </div>
                            <div class="d-flex flex-row pb-3">
                              <div class="d-flex align-items-center pe-2">
                                <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel2v"
                                  value="" aria-label="..." />
                              </div>
                              <div class="rounded border w-100 p-3">
                                <p class="d-flex align-items-center mb-0">
                                  <i class="fab fa-cc-visa fa-2x fa-lg text-body pe-2"></i>Debit Card
                                </p>
                              </div>
                            </div>
                            <div class="d-flex flex-row">
                              <div class="d-flex align-items-center pe-2">
                                <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel3v"
                                  value="" aria-label="..." />
                              </div>
                              <div class="rounded border w-100 p-3">
                                <p class="d-flex align-items-center mb-0">
                                  <i class="fab fa-cc-paypal fa-2x fa-lg text-body pe-2"></i>PayPal
                                </p>
                              </div>
                            </div>
                          </form>
                        </div>
                        <div class="col-md-6 col-lg-4 col-xl-6">
                          <div class="row">
                            <div class="col-12 col-xl-6">
                              <div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
                                <input type="text" id="typeName" class="form-control form-control-lg" siez="17"
                                  placeholder="John Smith" />
                                <label class="form-label" for="typeName">Name on card</label>
                              </div>

                              <div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
                                <input type="text" id="typeExp" class="form-control form-control-lg" placeholder="MM/YY"
                                  size="7" id="exp" minlength="7" maxlength="7" />
                                <label class="form-label" for="typeExp">Expiration</label>
                              </div>
                            </div>
                            <div class="col-12 col-xl-6">
                              <div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
                                <input type="text" id="typeText" class="form-control form-control-lg" siez="17"
                                  placeholder="1111 2222 3333 4444" minlength="19" maxlength="19" />
                                <label class="form-label" for="typeText">Card Number</label>
                              </div>

                              <div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
                                <input type="password" id="typeText" class="form-control form-control-lg"
                                  placeholder="&#9679;&#9679;&#9679;" size="1" minlength="3" maxlength="3" />
                                <label class="form-label" for="typeText">Cvv</label>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col-xl-3">
                          <div class="d-flex justify-content-between" style="font-weight: 500;">
                            <p class="mb-2">Subtotal</p>
                            <p class="mb-2">$23.49</p>
                          </div>

                          <div class="d-flex justify-content-between" style="font-weight: 500;">
                            <p class="mb-0">Shipping</p>
                            <p class="mb-0">$2.99</p>
                          </div>

                          <hr class="my-4">

                          <div class="d-flex justify-content-between mb-4" style="font-weight: 500;">
                            <p class="mb-2">Total (tax included)</p>
                            <p class="mb-2">$26.48</p>
                          </div>

                          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block btn-lg">
                            <div class="d-flex justify-content-between">
                              <span>Checkout</span>
                              <span>$26.48</span>
                            </div>
                          </button>

                        </div>
                      </div>

                    </div>
                  </div>

                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          @media (min-width: 1025px) {
          .h-custom {
          height: 100vh !important;
          }
          }