Card

<a href="../../pages/shop-grid.html" class="text-decoration-none text-inherit">
<div class="card card-product">
    <div class="card-body text-center py-8">
      <img src="../../assets/images/category/category-snack-munchies.jpg" alt="Grocery Ecommerce Template"
        class="mb-3">
      <div class="text-truncate">Snack & Munchies</div>
    </div>
  </div>
 </a>

<div class="col-lg-4">
  <div class="card card-product">
     <div class="card-body">
       <div class="text-center position-relative ">
         <div class=" position-absolute top-0 start-0">
           <span class="badge bg-danger">Sale</span>
         </div>
         <a href="#!"> <img src="../../assets/images/products/product-img-1.jpg" alt="Grocery Ecommerce Template"
            class="mb-3 img-fluid"></a>
          <div class="card-product-action">
           <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"><i
               class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"></i></a>
           <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" title="Wishlist"><i
               class="bi bi-heart"></i></a>
           <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" title="Compare"><i
               class="bi bi-arrow-left-right"></i></a>
       </div>
        </div>
       <div class="text-small mb-1"><a href="#!" class="text-decoration-none text-muted"><small>Snack &
             Munchies</small></a></div>
       <h2 class="fs-6"><a href="../../pages/shop-single.html" class="text-inherit text-decoration-none">Haldiram's
           Sev Bhujia</a></h2>
       <div>
      <small class="text-warning"> <i class="bi bi-star-fill"></i>
      <i class="bi bi-star-fill"></i>
           <i class="bi bi-star-fill"></i>
           <i class="bi bi-star-fill"></i>
           <i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5(149)</span>
       </div>
       <div class="d-flex justify-content-between align-items-center mt-3">
         <div><span class="text-dark">$18</span> <span
         class="text-decoration-line-through text-muted">$24</span>
         </div>
         <div><a href="#!" class="btn btn-primary btn-sm">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
         class="feather feather-plus">
        <line x1="5" y1="12" x2="19" y2="12"></line>
         </svg> Add</a></div>
       </div>
     </div>
   </div>
 </div>

<div class="row">
<div class="col-md-4 col-12">
   <div class="card  card-product-v2 h-100">
      <div class="card-body position-relative">
         <!-- badge -->
         <div class="text-center position-relative ">
            <div class=" position-absolute top-0 start-0">
               <span class="badge bg-danger">Sale</span>
            </div>
            <!-- img -->
            <a href="#!"> <img src="../../assets/images/products/product-img-1.jpg"
               alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a>
            <!-- action btn -->
            <div class="product-action-btn">
               <a href="#!" class="btn-action mb-1" data-bs-toggle="modal"
                  data-bs-target="#quickViewModal"><i class="bi bi-eye"></i></a>
               <a href="#!" class="btn-action mb-1" data-bs-toggle="tooltip" data-bs-html="true"
                  title="Wishlist"><i class="bi bi-heart"></i></a>
               <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
                  title="Compare"><i class="bi bi-arrow-left-right"></i></a>
            </div>
         </div>
         <!-- title -->
         <h2 class="fs-6"><a href="#!" class="text-inherit text-decoration-none">Haldiram's Sev
            Bhujia</a>
         </h2>
         <div>
            <!-- rating -->
            <small class="text-warning"> <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5(149)</span>
         </div>
         <!-- price -->
         <div class="d-flex justify-content-between align-items-center mt-3">
            <div><span class="text-danger">$18</span> <span
               class="text-decoration-line-through text-muted">$24</span>
            </div>
            <div><span class="text-uppercase small text-primary">
               In Stock</span>
            </div>
         </div>
         <!-- btn -->
         <div class="product-fade-block">
            <div class="d-grid mt-4">
               <a href="#" class="btn btn-primary rounded-pill">Add to Cart</a>
            </div>
         </div>
      </div>
      <!-- hidden class for hover -->
      <div class="product-content-fade border-info" style="margin-bottom: -60px;"></div>
   </div>
  </div>  </div>

<div class="row">
 <div class="col-md-6 col-12">
     <div class="card card-product">
        <div class="card-body">
           <div class="text-center  position-relative ">
              <a href="../../pages/shop-single.html"><img
                 src="../../assets/images/products/product-img-13.jpg" alt="Grocery Ecommerce Template"
                 class="mb-3 img-fluid"></a>
              <div class="card-product-action">
                 <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"><i
                    class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"></i></a>
                 <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" title="Wishlist"><i
                    class="bi bi-heart"></i></a>
                 <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" title="Compare"><i
                    class="bi bi-arrow-left-right"></i></a>
              </div>
           </div>
           <div class="text-small mb-1"><a href="#!" class="text-decoration-none text-muted"><small>Fruits &
              Vegetables</small></a>
           </div>
           <h2 class="fs-6"><a href="../../pages/shop-single.html" class="text-inherit text-decoration-none">Golden
              Pineapple</a>
           </h2>
           <div class="d-flex justify-content-between align-items-center mt-3">
              <div><span class="text-dark">$13</span> <span
                 class="text-decoration-line-through text-muted">$18</span>
              </div>
              <div>
                 <small class="text-warning"> <i class="bi bi-star-fill"></i>
                 <i class="bi bi-star-fill"></i>
                 <i class="bi bi-star-fill"></i>
                 <i class="bi bi-star-fill"></i>
                 <i class="bi bi-star-half"></i></small>
                 <span><small>4.5</small></span>
              </div>
           </div>
           <div class="d-grid mt-2">
              <a href="#!" class="btn btn-primary ">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-plus">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                 </svg>
                 Add to cart
              </a>
           </div>
           <div class="d-flex justify-content-start text-center mt-3">
              <div class="deals-countdown w-100" data-countdown="2022/11/11 00:00:00"></div>
           </div>
        </div>
     </div>
  </div>
 </div>

<div class="row">
  <div class="col-md-6 col-12">
     <div class="card  card-product-v2 h-100">
        <div class="card-body position-relative text-center">
           <div class="text-center position-relative ">
              <div class=" position-absolute top-0">
                 <span class="badge bg-info">25%</span>
              </div>
              <!-- img -->
              <a href="#!"> <img src="../../assets/images/products/product-img-2.jpg" alt="Grocery Ecommerce Template"
                 class="mb-3 img-fluid"></a>
              <!-- action btn -->
              <div class="product-action-btn">
                 <a href="#!" class="btn-action mb-1" data-bs-toggle="modal" data-bs-target="#quickViewModal"><i
                    class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"></i></a>
                 <a href="#!" class="btn-action mb-1" data-bs-toggle="tooltip" data-bs-html="true" title="Wishlist"><i
                    class="bi bi-heart"></i></a>
                 <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" title="Compare"><i
                    class="bi bi-arrow-left-right"></i></a>
              </div>
           </div>
           <div class="mb-3"><span class="text-dark">$15</span>
           </div>
           <!-- title -->
           <h2 class="fs-6"><a href="#!" class="text-inherit text-decoration-none">Britannia NutriChoice
              Digestive Biscuits</a>
           </h2>
           <div>
              <!-- rating -->
              <small class="text-warning"> <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-half"></i></small> <span class="text-muted small">4.4(3,149)</span>
           </div>
           <div class="mt-3"><span class="text-uppercase small text-primary">
              In Stock</span>
           </div>
           <div class="mt-4">
              <div class="progress mt-6" style="height: 8px;">
                 <div class="progress-bar bg-gray-400" role="progressbar" style="width: 88%;" aria-valuenow="88"
              aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="my-3">
             <small>the available products : <span class="text-dark fw-bold">12</span></small>
              </div>
           </div>
           <!-- btn -->
           <div class="product-fade-block">
              <div class="d-grid mt-4">
             <a href="#" class="btn btn-primary rounded-pill">Add to Cart</a>
              </div>
           </div>
        </div>
        <div class="product-content-fade border-info" style="margin-bottom: -60px;"></div>
     </div>
  </div>
 </div>

<div class="row">
  <div class="col-12">
     <div class="card card-product">
        <!-- card body -->
        <div class="card-body">
           <div class=" row align-items-center">
              <!-- col -->
              <div class="col-md-4 col-12">
                 <div class="text-center position-relative ">
                    <div class=" position-absolute top-0">
                       <!-- badge --> <span class="badge bg-danger">Sale</span>
                    </div>
                    <a href="shop-single.html">
                       <!-- img --><img src="../../assets/images/products/product-img-1.jpg"
                         alt="Grocery Ecommerce Template" class="mb-3 img-fluid">
                    </a>
                 </div>
              </div>
              <div class="col-md-8 col-12 flex-grow-1">
                 <!-- heading -->
                 <div class="text-small mb-1"><a href="#!" class="text-decoration-none text-muted"><small>Snack &
                    Munchies</small></a>
                 </div>
                 <h2 class="fs-6"><a href="shop-single.html" class="text-inherit text-decoration-none">Haldiram's Sev Bhujia</a>
                 </h2>
                 <div>
                    <!-- rating --><small class="text-warning"> <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5(149)</span>
                 </div>
                 <div class=" mt-6">
                    <!-- price -->
                    <div><span class="text-dark">$18</span> <span
                       class="text-decoration-line-through text-muted">$24</span>
                    </div>
                    <!-- btn -->
                    <div class="mt-3">
                       <a href="#!" class="btn btn-icon btn-sm btn-outline-gray-400 text-muted"
                         data-bs-toggle="modal" data-bs-target="#quickViewModal"><i class="bi bi-eye"
                           data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"></i></a>
                       <a href="shop-wishlist.html" class="btn btn-icon btn-sm btn-outline-gray-400 text-muted"
                         data-bs-toggle="tooltip" data-bs-html="true" title="Wishlist"><i
                           class="bi bi-heart"></i></a>
                       <a href="#!" class="btn btn-icon btn-sm btn-outline-gray-400 text-muted"
                         data-bs-toggle="tooltip" data-bs-html="true" title="Compare"><i
                          class="bi bi-arrow-left-right"></i></a>
                    </div>
                    <!-- btn -->
                    <div class="mt-2">
                       <a href="#!" class="btn btn-primary ">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="feather feather-shopping-bag me-2">
                  <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                  <line x1="3" y1="6" x2="21" y2="6"></line>
                  <path d="M16 10a4 4 0 0 1-8 0"></path>
                 </svg>
                  Add to Cart
                       </a>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div>
  </div>
 </div>

<div class="row">
 <div class="col-md-6 col-12">
    <div class="card">
       <div class="card-body p-6">
          <div class="form-check mb-4">
             <input class="form-check-input" type="radio" name="flexRadioDefault" id="homeRadio" checked>
             <label class="form-check-label text-dark fw-semi-bold" for="homeRadio">
             Home
             </label>
          </div>
          <!-- address -->
          <p class="mb-6">Jitu Chauhan<br>
             4450 North Avenue Oakland, <br>
             Nebraska, United States,<br>
             402-776-1106
          </p>
          <!-- btn -->
          <a href="#" class="btn btn-info btn-sm">Default address</a>
          <div class="mt-4">
             <a href="#" class="text-inherit">Edit </a>
             <a href="#" class="text-danger ms-3" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete
             </a>
          </div>
       </div>
    </div>
 </div>
 </div>

 <div class="col-md-4 col-12">

                            <div class="card card-product mb-4">
                              <div class="card-body text-center py-8">
                                <!-- img -->
                                <a href="#" tabindex="-1"><img src="../../assets/images/category/category-snack-munchies.jpg" alt="Grocery Ecommerce Template" class="mb-3"></a>
                                <!-- text -->

                              </div>
                            </div>
                            <div>
                              <span class="badge bg-danger rounded-pill">-45%</span>
                              <h2 class="mt-3 fs-6"> <a href="#" class="text-inherit" tabindex="-1">Salted Instant Popcorn</a></h2>
                              <div><span class="text-dark fs-5 fw-bold">$18</span> <span class="text-decoration-line-through text-muted">$24</span>
                              </div>
                              <div class="text-warning">
                                <!-- rating -->
                                <small> <i class="bi bi-star-fill"></i>
                                  <i class="bi bi-star-fill"></i>
                                  <i class="bi bi-star-fill"></i>
                                  <i class="bi bi-star-fill"></i>
                                  <i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5</span>
                              </div>

                            </div>
                          </div>