Filter
Filter
Filters
Price:
Categories
Stores
Price
Rating
<div class="col-12">
<!-- filter btn -->
<a class="btn btn-outline-gray-400 text-muted" data-bs-toggle="collapse" href="#collapseFilter" role="button"
aria-expanded="true" aria-controls="collapseFilter">
<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-filter me-2">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
</svg>
Filters
</a>
<!-- collapse -->
<div class="collapse mt-6 show" id="collapseFilter">
<div class="row row-cols-lg-4 row-cols-1 row-cols-md-2">
<!-- col -->
<div class="col">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<div class="card-body p-6">
<!-- content -->
<h5 class="mb-3">Categories</h5>
<!-- nav -->
<ul class="nav nav-category">
<!-- nav item -->
<li class="nav-item border-bottom w-100"><a href="#" class="nav-link">Dairy, Bread & Eggs</a>
</li>
<!-- nav item -->
<li class="nav-item border-bottom w-100"><a href="#" class="nav-link"> Snacks &
Munchies</a>
</li>
<!-- nav item -->
<li class="nav-item border-bottom w-100"><a href="#" class="nav-link"> Fruits & Vegetables</a>
</li>
<!-- nav item -->
<li class="nav-item border-bottom w-100"><a href="#" class="nav-link"> Cold Drinks & Juices </a>
</li>
<!-- nav item -->
<li class="nav-item border-bottom w-100"><a href="#" class="nav-link"> Breakfast & Instant Food
</a>
</li>
<!-- nav item -->
<li class="nav-item border-bottom w-100"><a href="#" class="nav-link"> Bakery & Biscuits</a>
</li>
<!-- nav item -->
<li class="nav-item "><a href="#" class="nav-link"> Chicken, Meat & Fish</a>
</li>
</ul>
</div>
</div>
<!-- col -->
</div>
<div class="col">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<div class="card-body p-6">
<!-- content -->
<div>
<h5 class="mb-3">Stores</h5>
<div class="my-4">
<!-- input -->
<input type="search" class="form-control" placeholder="Search by store">
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="eGrocery" checked>
<label class="form-check-label" for="eGrocery">
E-Grocery
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="DealShare">
<label class="form-check-label" for="DealShare">
DealShare
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="Dmart">
<label class="form-check-label" for="Dmart">
DMart
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="Blinkit">
<label class="form-check-label" for="Blinkit">
Blinkit
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="BigBasket">
<label class="form-check-label" for="BigBasket">
BigBasket
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="StoreFront">
<label class="form-check-label" for="StoreFront">
StoreFront
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="Spencers">
<label class="form-check-label" for="Spencers">
Spencers
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="onlineGrocery">
<label class="form-check-label" for="onlineGrocery">
Online Grocery
</label>
</div>
</div>
</div>
</div>
<!-- col -->
</div>
<div class="col">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<div class="card-body p-6">
<!-- content -->
<div>
<h5 class="mb-3">Price</h5>
<div>
<div id="priceRange" class="mb-3"></div>
<small class="text-muted">Price:</small> <span id="priceRange-value" class="small"></span>
</div>
</div>
</div>
</div>
<!-- col -->
</div>
<div class="col">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<div class="card-body p-6">
<!-- content -->
<div>
<h5 class="mb-3">Rating</h5>
<div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingFive">
<!-- rating -->
<label class="form-check-label" for="ratingFive">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingFour" checked>
<!-- rating -->
<label class="form-check-label" for="ratingFour">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingThree">
<!-- rating -->
<label class="form-check-label" for="ratingThree">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingTwo">
<!-- rating -->
<label class="form-check-label" for="ratingTwo">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingOne">
<!-- rating -->
<label class="form-check-label" for="ratingOne">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Filter
24 Products found
<div class="row">
<div class="col-12">
<div class="d-lg-flex justify-content-between align-items-center">
<div class="mb-3 mb-lg-0">
<p class="mb-0"> <span class="text-dark">24 </span> Products found </p>
</div>
<!-- icon -->
<div class="d-md-flex justify-content-between align-items-center">
<div class="d-flex align-items-center justify-content-between">
<div class="">
<a href="../../pages/shop-list.html" class="text-muted me-3"><i class="bi bi-list-ul"></i></a>
<a href="../../pages/shop-grid.html" class=" me-3 active"><i class="bi bi-grid"></i></a>
<a href="../../pages/shop-grid-3-column.html" class="me-3 text-muted"><i class="bi bi-grid-3x3-gap"></i></a>
</div>
<div class="ms-2 d-lg-none">
<a class="btn btn-outline-gray-400 text-muted" data-bs-toggle="offcanvas" href="#offcanvasCategory" role="button" aria-controls="offcanvasCategory">
<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-filter me-2">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
</svg>
Filters
</a>
</div>
</div>
<div class="d-flex mt-2 mt-lg-0">
<div class="me-2 flex-grow-1">
<!-- select option -->
<select class="form-select" aria-label="Default select example">
<option selected>Show: 50</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
<div>
<!-- select option -->
<select class="form-select" aria-label="Default select example">
<option selected>Sort by: Featured</option>
<option value="Low to High">Price: Low to High</option>
<option value="High to Low"> Price: High to Low</option>
<option value="Release Date"> Release Date</option>
<option value="Avg. Rating"> Avg. Rating</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
