Shopping carts

Bootstrap 5 Shopping Carts component

Responsive Shopping Carts built with Bootstrap 5. Multiple examples of various designs and functionalities. Ready to use pages and templates.


Basic example

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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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 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 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 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 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" 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 carts #2

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 text-black">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://mdbootstrap.com/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="text-black mb-0">Cotton T-shirt</h6>
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                                <button 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 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://mdbootstrap.com/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="text-black mb-0">Cotton T-shirt</h6>
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                                <button 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 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://mdbootstrap.com/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="text-black mb-0">Cotton T-shirt</h6>
                              </div>
                              <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
                                <button 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 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-grey">
                          <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 class="select">
                                <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 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" 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;
          }

          .bg-grey {
          background-color: #eae8e8;
          }

          @media (min-width: 992px) {
          .card-registration-2 .bg-grey {
          border-top-right-radius: 16px;
          border-bottom-right-radius: 16px;
          }
          }

          @media (max-width: 991px) {
          .card-registration-2 .bg-grey {
          border-bottom-left-radius: 16px;
          border-bottom-right-radius: 16px;
          }
          }
        

Shopping carts #3

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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.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>Blue denim shirt</strong></p>
                          <p>Color: blue</p>
                          <p>Size: M</p>
                          <button type="button" class="btn btn-primary btn-sm me-1 mb-2" data-mdb-toggle="tooltip"
                            title="Remove item">
                            <i class="fas fa-trash"></i>
                          </button>
                          <button type="button" class="btn btn-danger btn-sm mb-2" data-mdb-toggle="tooltip"
                            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 class="btn btn-primary px-3 me-2"
                              onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                              <i class="fas fa-minus"></i>
                            </button>

                            <div 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 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://mdbootstrap.com/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" class="btn btn-primary btn-sm me-1 mb-2" data-mdb-toggle="tooltip"
                            title="Remove item">
                            <i class="fas fa-trash"></i>
                          </button>
                          <button type="button" class="btn btn-danger btn-sm mb-2" data-mdb-toggle="tooltip"
                            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 class="btn btn-primary px-3 me-2"
                              onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                              <i class="fas fa-minus"></i>
                            </button>

                            <div 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 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://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/visa.svg"
                        alt="Visa" />
                      <img class="me-2" width="45px"
                        src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/amex.svg"
                        alt="American Express" />
                      <img class="me-2" width="45px"
                        src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/mastercard.svg"
                        alt="Mastercard" />
                      <img class="me-2" width="45px"
                        src="https://mdbootstrap.com/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" 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 carts #4

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" 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-10">

                  <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="fw-normal mb-0 text-black">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://mdbootstrap.com/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 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 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://mdbootstrap.com/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 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 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://mdbootstrap.com/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 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 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://mdbootstrap.com/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 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 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 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" class="btn btn-outline-warning btn-lg ms-3">Apply</button>
                    </div>
                  </div>

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

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

Shopping carts #5

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 text-black">

                      <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://mdbootstrap.com/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 text-black"><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 onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                  <input class="quantity fw-bold text-black" min="0" name="quantity" value="1"
                                    type="number">
                                  <button 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://mdbootstrap.com/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 text-black"><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 onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                  <input class="quantity fw-bold text-black" min="0" name="quantity" value="1"
                                    type="number">
                                  <button 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://mdbootstrap.com/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 text-black"><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 onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                  <input class="quantity fw-bold text-black" min="0" name="quantity" value="2"
                                    type="number">
                                  <button 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" style="background-color: #e1f5fe;">
                            <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 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 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 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 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" 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 carts #6

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" class="btn btn-light btn-lg me-2">Continue shopping</button>
                    <button type="button" class="btn btn-primary btn-lg">Add to cart</button>
                  </div>
        
                </div>
              </div>
            </div>
          </section>
        

Shopping carts #7

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 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 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 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 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-dark 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-dark 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-dark 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 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 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 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 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" 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;
            }
          }