Filters
Filters
Filter #1
<div >
<a class="d-flex align-items-center justify-content-between"
data-bs-toggle="collapse" href="#collapseColor" role="button"
aria-expanded="true" aria-controls="collapseColor">
<h5 class="mb-0 fs-6">Color</h5>
<i class="bi bi-chevron-down chevron-down"></i>
</a>
<div class="collapse show" id="collapseColor">
<div class="mt-3 ps-1" style="height: 180px" data-simplebar>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterBlack" checked />
<label class="form-check-label"
for="filterBlack">Black</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterBrown" />
<label class="form-check-label"
for="filterBrown">Brown</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterGreen" />
<label class="form-check-label"
for="filterGreen">Green</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterYellow" />
<label class="form-check-label"
for="filterYellow">Yellow</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterRed" />
<label class="form-check-label" for="filterRed">Red</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterPink" />
<label class="form-check-label"
for="filterPink">Pink</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterCyan" />
<label class="form-check-label"
for="filterCyan">Cyan</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterBlue" />
<label class="form-check-label"
for="filterBlue">Blue</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="filterGray" />
<label class="form-check-label"
for="filterGray">Gray</label>
</div>
</div>
</div>
</div>Filter #2
<div>
<a class="d-flex align-items-center justify-content-between"
data-bs-toggle="collapse" href="#collapsePrice" role="button"
aria-expanded="true" aria-controls="collapsePrice">
<h5 class="mb-0 fs-6">Price</h5>
<i class="bi bi-chevron-down chevron-down"></i>
</a>
<div class="collapse show" id="collapsePrice">
<div class="mt-3">
<!-- range -->
<div id="priceRange" class="mb-3"></div>
<!-- <small class="text-muted">Price:</small> -->
<span id="priceRange-value"
class="small d-flex justify-content-between"></span>
</div>
</div>
</div>Filter #3
<div>
<a class="d-flex align-items-center justify-content-between"
data-bs-toggle="collapse" href="#collapseRating" role="button"
aria-expanded="true" aria-controls="collapseRating">
<h5 class="mb-0 fs-6">Rating</h5>
<i class="bi bi-chevron-down chevron-down"></i>
</a>
<div class="collapse show" id="collapseRating">
<div class="mt-3">
<div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="ratingFive" />
<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>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="ratingFour" checked />
<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>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="ratingThree" />
<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>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="ratingTwo" />
<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>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value=""
id="ratingOne" />
<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>Filter #4
<div class="col-12">
<div class="d-flex align-items-center gap-lg-8 gap-3 mb-4 flex-wrap">
<div>
<a class="d-inline-flex align-items-center gap-2"
data-bs-toggle="offcanvas" href="#offcanvasCategory"
role="button" aria-controls="offcanvasCategory">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-sliders2"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M10.5 1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4H1.5a.5.5 0 0 1 0-1H10V1.5a.5.5 0 0 1 .5-.5M12 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-6.5 2A.5.5 0 0 1 6 6v1.5h8.5a.5.5 0 0 1 0 1H6V10a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5M1 8a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 1 8m9.5 2a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V13H1.5a.5.5 0 0 1 0-1H10v-1.5a.5.5 0 0 1 .5-.5m1.5 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5" />
</svg>
<span>Filter</span>
</a>
</div>
<div class="d-flex align-items-center gap-3 flex-wrap flex-grow-1">
<div class="col-lg-3 col-12">
<select class="" data-choices=""
data-choices-removeitembutton="true"
aria-label="Default select example">
<option value="">Most Popular</option>
<option value="Best Match">Best Match</option>
<option value="New Arrivals">New Arrivals</option>
<option value="Price, low to high">Price, low to high
</option>
<option value="Price, high to low">Price, high to low
</option>
</select>
</div>
<div class="dropdown col-xl-2 col-lg-3 col-12">
<button
class="dropdownButton btn btn-filter dropdown-toggle d-flex justify-content-between align-items-center w-100 text-start px-3 gap-6"
type="button" id="dropdownButton" data-bs-toggle="dropdown"
aria-expanded="false" data-dropdown="category"
data-bs-auto-close="outside">
<span>Category</span>
</button>
<ul class="dropdown-menu p-3 dropdownSelect"
data-dropdown="category">
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categoryOne" />
<label class="form-check-label"
for="categoryOne">Kitchen</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categoryTwo" />
<label class="form-check-label"
for="categoryTwo">Decoration</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categoryThree" />
<label class="form-check-label"
for="categoryThree">Lighting</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categoryFour" />
<label class="form-check-label"
for="categoryFour">Office</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categoryFive" />
<label class="form-check-label"
for="categoryFive">Bedroom</label>
</div>
</li>
</ul>
</div>
<div class="dropdown col-xl-2 col-lg-3 col-12">
<button
class="dropdownButton btn btn-filter dropdown-toggle d-flex justify-content-between align-items-center w-100 text-start px-3 gap-6"
type="button" id="dropdownButtonSecond"
data-bs-toggle="dropdown" aria-expanded="false"
data-dropdown="type" data-bs-auto-close="outside">
<span>Type</span>
</button>
<ul class="dropdown-menu p-3 dropdownSelect"
data-dropdown="type">
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categorySix" />
<label class="form-check-label"
for="categorySix">Sofa</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categorySeven" />
<label class="form-check-label"
for="categorySeven">Lamp</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categoryEight" />
<label class="form-check-label"
for="categoryEight">Frame</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="categoryNine" />
<label class="form-check-label"
for="categoryNine">Stool</label>
</div>
</li>
</ul>
</div>
<div class="dropdown col-xl-2 col-lg-2 col-12">
<button
class="dropdownButton btn btn-filter dropdown-toggle d-flex justify-content-between align-items-center w-100 text-start px-3 gap-6"
type="button" id="dropdownButtonThird"
data-bs-toggle="dropdown" aria-expanded="false"
data-dropdown="color" data-bs-auto-close="outside">
<span>Color</span>
</button>
<ul class="dropdown-menu p-3 dropdownSelect"
data-dropdown="color">
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="colorOne" />
<label
class="form-check-label d-flex align-items-center gap-1"
for="colorOne">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg"
width="10" height="10"
fill="currentColor"
class="bi bi-square-fill text-success"
viewBox="0 0 16 16">
<path
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
</svg>
</span>
<span class="">Green</span>
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="colorTwo" />
<label
class="form-check-label d-flex align-items-center gap-1"
for="colorTwo">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg"
width="10" height="10"
fill="currentColor"
class="bi bi-square-fill text-primary"
viewBox="0 0 16 16">
<path
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
</svg>
</span>
Black
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="colorThree" />
<label
class="form-check-label d-flex align-items-center gap-1"
for="colorThree">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg"
width="10" height="10"
fill="currentColor"
class="bi bi-square-fill text-danger"
viewBox="0 0 16 16">
<path
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
</svg>
</span>
Red
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="colorFour" />
<label
class="form-check-label d-flex align-items-center gap-1"
for="colorFour">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg"
width="10" height="10"
fill="currentColor"
class="bi bi-square-fill text-light"
viewBox="0 0 16 16">
<path
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
</svg>
</span>
Gray
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Filter #5
<div
class="mb-4 d-flex flex-column flex-lg-row flex-row justify-content-between gap-4">
<div class="d-flex gap-2 flex-wrap align-items-lg-start">
<button type="button"
class="btn btn-sm btn-light d-flex align-items-center gap-2">
In Stock
<i class="bi bi-x lh-1"></i>
</button>
<button type="button"
class="btn btn-sm btn-light d-flex align-items-center gap-2">
Black
<i class="bi bi-x lh-1"></i>
</button>
<button type="button"
class="btn btn-sm btn-light d-flex align-items-center gap-2">
Brand
<i class="bi bi-x lh-1"></i>
</button>
<button type="button"
class="btn btn-sm btn-light d-flex align-items-center gap-2">
Kitchen
<i class="bi bi-x lh-1"></i>
</button>
<button type="button"
class="btn btn-sm btn-light d-flex align-items-center gap-2">
$10 - $259
<i class="bi bi-x lh-1"></i>
</button>
<button type="button" class="btn btn-sm btn-focus-none">Clear
all</button>
</div>
</div>