Developed by Codescandy

List

List #1

Payment Methods

Add Payment
  • **** 1234

    Expires in 10/2023

  • Mastercard ending in 1234

    Expires in 03/2026

  • Discover ending in 1234

    Expires in 07/2020 This card is expired.

  • American Express ending in 1234

    Expires in 12/2021

  • Paypal Express ending in 1234

    Expires in 10/2021

<div class="row">
<!-- col -->
    <div class="col-12">
       <div class="p-4">
          <!-- heading -->
          <div class="d-flex justify-content-between mb-6 align-items-center">
             <h2 class="mb-0">Payment Methods</h2>
             <a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#paymentModal">Add
             Payment </a>
          </div>
          <ul class="list-group list-group-flush">
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/visa.svg" alt="">
                      <!-- text -->
                      <div class="ms-4">
                          <h5 class="mb-0 h6 h6">**** 1234</h5>
                         <p class="mb-0 small">Expires in 10/2023
                        </p>
                      </div>
                   </div>
                   <div>
                      <!-- button -->
                      <a href="#" class="btn btn-outline-gray-400 disabled btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/mastercard.svg" alt="" class="me-3">
                      <div>
                       <h5 class="mb-0 h6">Mastercard ending in 1234</h5>
                       <p class="mb-0 small">Expires in 03/2026</p>
                      </div>
                   </div>
                   <div>
                      <!-- button-->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/discover.svg" alt="" class="me-3">
                      <div>
                          <!-- text -->
                                <h5 class="mb-0 h6">Discover ending in 1234</h5>
                             <p class="mb-0 small">Expires in 07/2020 <span class="badge bg-warning text-dark"> This card is
                           expired.</span>
                         </p>
                      </div>
                   </div>
                   <div>
                      <!-- btn -->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/americanexpress.svg" alt="" class="me-3">
                      <!-- text -->
                      <div>
                         <h5 class="mb-0 h6">American Express ending in 1234</h5>
                        <p class="mb-0 small">Expires in 12/2021</p>
                      </div>
                   </div>
                   <div>
                      <!-- btn -->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5 border-bottom">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/paypal.svg" alt="" class="me-3">
                      <div>
                       <!-- text -->
                        <h5 class="mb-0 h6">Paypal Express ending in 1234</h5>
                         <p class="mb-0 small">Expires in 10/2021</p>
                      </div>
                   </div>
                   <div>
                      <!-- btn -->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
          </ul>
       </div>
    </div>
                         </div>

List #2

Continue Shopping Update Cart 
<div class="row">
 <div class="col-12">
       <div class="py-3">
          <!-- alert -->
          <div class="alert alert-danger p-2" role="alert">
             You’ve got FREE delivery. Start <a href="#!" class="alert-link">checkout now!</a>
          </div>
          <ul class="list-group list-group-flush">
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0 border-top">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-1.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                        <h6 class="mb-0">Haldiram's Sev Bhujia</h6>
                      </a>
                      <span><small class="text-muted">.98 / lb</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                    <a href="#!" class="text-decoration-none text-inherit">
                        <span class="me-1 align-text-bottom">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                            </path>
                            <line x1="10" y1="11" x2="10" y2="17"></line>
                            <line x1="14" y1="11" x2="14" y2="17"></line>
                        </svg>
                        </span>
                        <span class="text-muted">Remove</span>
                    </a>
                     </div>
                    </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                    <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                    <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                    <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$5.00</span>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-2.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                   <h6 class="mb-0">NutriChoice Digestive </h6>
                      </a>
                      <span><small class="text-muted">250g</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                   <a href="#!" class="text-decoration-none text-inherit">
                  <span class="me-1 align-text-bottom">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                          <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                           </path>
                          <line x1="10" y1="11" x2="10" y2="17"></line>
                         <line x1="14" y1="11" x2="14" y2="17"></line>
                       </svg>
                     </span>
                     <span class="text-muted">Remove</span>
                    </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                        <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                     <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                    <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold text-danger">$20.00</span>
                      <div class="text-decoration-line-through text-muted small">$26.00</div>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-3.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                  <h6 class="mb-0">Cadbury 5 Star Chocolate</h6>
                      </a>
                      <span><small class="text-muted">1 kg</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                    <a href="#!" class="text-decoration-none text-inherit">
                        <span class="me-1 align-text-bottom">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
              <polyline points="3 6 5 6 21 6"></polyline>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                </path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                      <line x1="14" y1="11" x2="14" y2="17"></line>
                      </svg>
                       </span>
                     <span class="text-muted">Remove</span>
                       </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                         <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                         <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                       <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$15.00</span>
                      <div class="text-decoration-line-through text-muted small">$20.00</div>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-4.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                     <h6 class="mb-0">Onion Flavour Potato</h6>
                      </a>
                      <span><small class="text-muted">250g</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                     <a href="#!" class="text-decoration-none text-inherit">
                         <span class="me-1 align-text-bottom">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                                  <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                   </path>
                                  <line x1="10" y1="11" x2="10" y2="17"></line>
                               <line x1="14" y1="11" x2="14" y2="17"></line>
                             </svg>
                            </span>
                          <span class="text-muted">Remove</span>
                        </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                         <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                         <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                       <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$15.00</span>
                      <div class="text-decoration-line-through text-muted small">$20.00</div>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0 border-bottom">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-5.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                    <h6 class="mb-0">Salted Instant Popcorn </h6>
                      </a>
                      <span><small class="text-muted">100g</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                     <a href="#!" class="text-decoration-none text-inherit">
                          <span class="me-1 align-text-bottom">
                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                         <polyline points="3 6 5 6 21 6"></polyline>
                               <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                           </path>
                               <line x1="10" y1="11" x2="10" y2="17"></line>
                               <line x1="14" y1="11" x2="14" y2="17"></line>
                          </svg>
                           </span>
                          <span class="text-muted">Remove</span>
                         </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                        <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                     <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                     <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$15.00</span>
                      <div class="text-decoration-line-through text-muted small">$25.00</div>
                   </div>
                </div>
             </li>
          </ul>
          <!-- btn -->
          <div class="d-flex justify-content-between mt-4">
             <a href="#!" class="btn btn-primary">Continue Shopping</a>
             <a href="#!" class="btn btn-dark">Update Cart</a>
          </div>
       </div>
    </div>
                         </div>