Forms: Filters
Component #1
Current opportunities
We’re a truly global team with 17 offices around the world.
<!-- List Directory -->
<div id="openRolesSection" class="container content-space-1">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Current opportunities</h2>
<p>We’re a truly global team with 17 offices around the world.</p>
</div>
<!-- End Heading -->
<!-- Form -->
<form>
<div class="row gx-2 gx-md-3 mb-7">
<div class="col-md-4 mb-2 mb-md-0">
<label class="form-label visually-hidden" for="searchJobCareers">Search job</label>
<!-- Form -->
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-search"></i>
</span>
<input type="text" class="form-control form-control-lg" id="searchJobCareers" placeholder="Search job" aria-label="Search job">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-2 mb-sm-0">
<label class="form-label visually-hidden" for="locationsJobCareers">Select location</label>
<!-- Select -->
<select class="form-select form-select-lg" id="locationsJobCareers" aria-label="Select location">
<option selected>All locations</option>
<option value="1">London</option>
<option value="2">San Francisco</option>
<option value="3">Others</option>
</select>
<!-- End Select -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<label class="form-label visually-hidden" for="departmentsJobCareers">Select department</label>
<!-- Select -->
<select class="form-select form-select-lg" id="departmentsJobCareers" aria-label="Select department">
<option selected>All departments</option>
<option value="1">Software Development</option>
<option value="2">Sales</option>
<option value="3">Business strategy</option>
<option value="4">Design</option>
</select>
<!-- End Select -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</form>
<!-- End Form -->
<button type="button" class="btn btn-ghost-secondary">
<i class="bi-bell me-1"></i> Create alert
</button>
</div>
<!-- End List Directory -->
Component #2
<!-- Card Grid -->
<div class="container">
<div class="row justify-content-md-between align-items-md-center">
<div class="col-md-5 mb-5 mb-md-0">
<!-- Tags -->
<div class="d-md-flex align-items-md-center text-center text-md-start">
<span class="d-block me-md-3 mb-2 mb-md-1">Tags:</span>
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Business</a>
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Health</a>
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Environment</a>
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Adventure</a>
</div>
<!-- End Tags -->
</div>
<!-- End Col -->
<div class="col-md-5 col-lg-4">
<form>
<!-- Input Card -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search articles" aria-label="Search articles">
<button type="button" class="btn btn-primary"><i class="bi-search"></i></button>
</div>
<!-- End Input Card -->
</form>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card Grid -->
Component #3
128 homes
Property for sale in London
<!-- Heading -->
<div class="mb-5">
<div class="row align-items-center">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block">128 homes</span>
<h1 class="h2 mb-0">Property for sale in London</h1>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<!-- Select -->
<select class="form-select form-select-sm">
<option value="mostRecent" selected>Most recent</option>
<option value="HighestPrice">Highest price</option>
<option value="LowestPrice">Lowest price</option>
<option value="mostReduced">Most reduced</option>
<option value="mostPopular">Most popular</option>
</select>
<!-- End Select -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Heading -->
Component #4
<div class="row align-items-center">
<div class="col-sm mb-3 mb-sm-0">
<h3 class="mb-0">90 jobs for <span class="fw-normal">UK</span></h3>
</div>
<div class="col-sm-auto">
<div class="d-sm-flex justify-content-sm-end align-items-center">
<!-- Select -->
<div class="mb-2 mb-sm-0 me-sm-2">
<select class="form-select form-select-sm">
<option value="Relevance" selected>Relevance</option>
<option value="mostRecent">Most recent</option>
</select>
</div>
<!-- End Select -->
<!-- Select -->
<div class="mb-2 mb-sm-0 me-sm-2">
<select class="form-select form-select-sm">
<option value="alphabeticalOrderSelect1" selected>A-to-Z</option>
<option value="alphabeticalOrderSelect2">Z-to-A</option>
</select>
</div>
<!-- End Select -->
<!-- Nav -->
<ul class="nav nav-segment">
<li class="nav-item">
<a class="nav-link active" href="../demo-jobs/job-grid.html">
<i class="bi-grid-fill"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../demo-jobs/job-list.html">
<i class="bi-list"></i>
</a>
</li>
</ul>
<!-- End Nav -->
</div>
</div>
</div>
<!-- End Row -->
Component #5
195 courses to get started
<!-- Filter -->
<div class="border-bottom pb-3">
<div class="row justify-content-md-start align-items-md-center">
<div class="col-md-4 mb-3 mb-md-0">
<h5 class="mb-0"><span class="text-dark fw-semi-bold">195 courses</span> to get started</h5>
</div>
<!-- End Col -->
<div class="col-md-8 text-md-end">
<div class="row gx-2">
<div class="col-auto mb-2">
<!-- Select -->
<select class="form-select form-select-sm">
<option value="sort1">Highest rated</option>
<option value="sort2">Newest</option>
<option value="sort3">Lowest price</option>
<option value="sort4">Highest price</option>
</select>
<!-- End Select -->
</div>
<!-- End Col -->
<div class="col-auto mb-2">
<!-- Select -->
<select class="form-select form-select-sm">
<option value="price1" selected>Paid</option>
<option value="price2">Free</option>
</select>
<!-- End Select -->
</div>
<!-- End Col -->
<div class="col-auto mb-2">
<!-- Select -->
<select class="form-select form-select-sm">
<option value="duration1">0-3 hours</option>
<option value="duration2">3-9 hours</option>
<option value="duration3">9-24 hours</option>
<option value="duration4" selected>24+ hours</option>
</select>
<!-- End Select -->
</div>
<!-- End Col -->
<div class="col-auto mb-2">
<!-- Select -->
<select class="form-select form-select-sm">
<option value="beginner" selected>Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
<!-- End Select -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Filter -->
Component #6
<!-- Sidebar Example -->
<div class="container content-space-1">
<div class="row">
<div class="col-lg-3 order-lg-2">
<!-- Navbar -->
<div class="navbar-expand-lg mb-5">
<!-- Navbar Toggle -->
<div class="d-grid">
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg1" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg1">
<span class="d-flex justify-content-between align-items-center">
<span class="text-dark">Filter</span>
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</span>
</button>
</div>
<!-- End Navbar Toggle -->
<!-- Navbar Collapse -->
<div id="navbarVerticalNavMenuEg1" class="collapse navbar-collapse">
<div class="w-100">
<!-- Form -->
<form>
<div class="mb-5">
<h5 class="mb-3">Distance</h5>
<p class="form-text">Within <span id="rangeSliderDistance"></span> miles of <span class="fw-semi-bold text-dark">London</span></p>
<!-- Range Slider -->
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 100
},
"connect": [true, false],
"start": 25,
"result_min_target_el": "#rangeSliderDistance"
}'>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-5">
<span class="text-body">5 miles</span>
<span class="text-body">100 miles</span>
</div>
<!-- End Range Slider -->
</div>
<div class="mb-5">
<h5 class="mb-3">Last updated</h5>
<!-- Select -->
<select class="form-select form-select-sm">
<option value="within last day">within last day</option>
<option value="within last week">within last week</option>
<option value="within last month">within last month</option>
<option value="within last 3 months">within last 3 months</option>
<option value="within last 6 months" selected>within last 6 months</option>
<option value="show all resumes">show all resumes</option>
</select>
<!-- End Select -->
</div>
<div class="mb-5">
<h5 class="mb-3">Job titles</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobTitleCheckbox1">
<label class="form-check-label d-flex" for="jobTitleCheckbox1">Graphic Designer <span class="ms-auto">2</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobTitleCheckbox2" checked>
<label class="form-check-label d-flex" for="jobTitleCheckbox2">UI/UX Designer <span class="ms-auto">2</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobTitleCheckbox3" checked>
<label class="form-check-label d-flex" for="jobTitleCheckbox3">Full Stack Developer <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobTitleCheckbox4">
<label class="form-check-label d-flex" for="jobTitleCheckbox4">Information Associate <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="mb-5">
<h5 class="mb-3">Company</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobCompanyCheckbox1">
<label class="form-check-label d-flex" for="jobCompanyCheckbox1">Capsule <span class="ms-auto">2</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobCompanyCheckbox2">
<label class="form-check-label d-flex" for="jobCompanyCheckbox2">Dropbox <span class="ms-auto">18</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobCompanyCheckbox3">
<label class="form-check-label d-flex" for="jobCompanyCheckbox3">Mailchimp <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobCompanyCheckbox4">
<label class="form-check-label d-flex" for="jobCompanyCheckbox4">Google <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobCompanyCheckbox5">
<label class="form-check-label d-flex" for="jobCompanyCheckbox5">Prosperops <span class="ms-auto">2</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobCompanyCheckbox6">
<label class="form-check-label d-flex" for="jobCompanyCheckbox6">Figam <span class="ms-auto">6</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="mb-5">
<h5 class="mb-3">Years of experience</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobYearExperienceCheckbox1" checked>
<label class="form-check-label d-flex" for="jobYearExperienceCheckbox1">6-10 years <span class="ms-auto">73</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobYearExperienceCheckbox2">
<label class="form-check-label d-flex" for="jobYearExperienceCheckbox2">3-5 years <span class="ms-auto">3</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobYearExperienceCheckbox3">
<label class="form-check-label d-flex" for="jobYearExperienceCheckbox3">More than 10 years <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="mb-5">
<h5 class="mb-3">Education</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobEducationCheckbox1">
<label class="form-check-label d-flex" for="jobEducationCheckbox1">Bachelors <span class="ms-auto">6</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobEducationCheckbox2">
<label class="form-check-label d-flex" for="jobEducationCheckbox2">Masters <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobEducationCheckbox3">
<label class="form-check-label d-flex" for="jobEducationCheckbox3">Associates <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="mb-5">
<h5 class="mb-3">Assessment <i class="bi-question-circle text-body ml-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Assessments shown her6 are summarized for convenience only. View the candidate’s profile for more information, including score ranges for each assessment. Indeed makes no statement as to the skill level of any candidate."></i></h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobAssessmentCheckbox1">
<label class="form-check-label d-flex" for="jobAssessmentCheckbox1">Attention to detail <span class="ms-auto">3</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobAssessmentCheckbox2">
<label class="form-check-label d-flex" for="jobAssessmentCheckbox2">Graphic design <span class="ms-auto">7</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobAssessmentCheckbox3">
<label class="form-check-label d-flex" for="jobAssessmentCheckbox3">Social Media <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="jobAssessmentCheckbox4">
<label class="form-check-label d-flex" for="jobAssessmentCheckbox4">Marketing <span class="ms-auto">1</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="d-grid">
<button type="button" class="btn btn-white btn-transition">Clear all</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Navbar Collapse -->
</div>
<!-- End Navbar -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Sidebar Example -->
<link rel="stylesheet" href="../assets/vendor/nouislider/dist/nouislider.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/nouislider/dist/nouislider.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF NOUISLIDER`
// =======================================================
HSCore.components.HSNoUISlider.init('.js-nouislider')
})()
</script>
Component #7
<!-- Card Grid -->
<div class="container content-space-1">
<div class="row">
<div class="col-lg-3">
<!-- Navbar -->
<div class="navbar-expand-lg mb-5">
<!-- Navbar Toggle -->
<div class="d-grid">
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg2" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg2">
<span class="d-flex justify-content-between align-items-center">
<span class="text-dark">Filter</span>
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</span>
</button>
</div>
<!-- End Navbar Toggle -->
<!-- Navbar Collapse -->
<div id="navbarVerticalNavMenuEg2" class="collapse navbar-collapse">
<div class="w-100">
<!-- Form -->
<form>
<div class="border-bottom pb-4 mb-4">
<h5>Gender</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="menCheckbox" checked>
<label class="form-check-label" for="menCheckbox">Men (73)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="womenCheckbox" checked>
<label class="form-check-label" for="womenCheckbox">Women (51)</label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Brand</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="adidasCheckbox">
<label class="form-check-label" for="adidasCheckbox">Adidas (16)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="newBalanceCheckbox">
<label class="form-check-label" for="newBalanceCheckbox">New Balance (8)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="nikeCheckbox">
<label class="form-check-label" for="nikeCheckbox">Nike (35)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fredPerryCheckbox">
<label class="form-check-label" for="fredPerryCheckbox">Fred Perry (5)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="tnfCheckbox">
<label class="form-check-label" for="tnfCheckbox">The North Face (1)</label>
</div>
<!-- End Checkboxes -->
</div>
<!-- View More - Collapse -->
<div class="collapse" id="collapseBrand">
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="gucciCheckbox">
<label class="form-check-label" for="gucciCheckbox">Gucci (5)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="mangoCheckbox">
<label class="form-check-label" for="mangoCheckbox">Mango (1)</label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link-sm link-collapse" href="#collapseBrand" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseBrand">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Size</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeSCheckbox" checked>
<label class="form-check-label" for="sizeSCheckbox">S (27)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeMCheckbox">
<label class="form-check-label" for="sizeMCheckbox">M (18)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeLCheckbox" checked>
<label class="form-check-label" for="sizeLCheckbox">L (0)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeXLCheckbox">
<label class="form-check-label" for="sizeXLCheckbox">XL (1)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeXXLCheckbox">
<label class="form-check-label" for="sizeXXLCheckbox">XXL (2)</label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Category</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="tshirtCheckbox" checked>
<label class="form-check-label" for="tshirtCheckbox">T-shirt (73)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="shoesCheckbox">
<label class="form-check-label" for="shoesCheckbox">Shoes (0)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="accessoriesCheckbox" checked>
<label class="form-check-label" for="accessoriesCheckbox">Accessories (51)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="topsCheckbox" checked>
<label class="form-check-label" for="topsCheckbox">Tops (5)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="bottomCheckbox">
<label class="form-check-label" for="bottomCheckbox">Bottom (11)</label>
</div>
<!-- End Checkboxes -->
</div>
<!-- View More - Collapse -->
<div class="collapse" id="collapseCategory">
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="shortsCheckbox">
<label class="form-check-label" for="shortsCheckbox">Shorts (6)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hatsCheckbox">
<label class="form-check-label" for="hatsCheckbox">Hats (3)</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="socksCheckbox">
<label class="form-check-label" for="socksCheckbox">Socks (8)</label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link-sm link-collapse" href="#collapseCategory" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseCategory">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Rating</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="1starCheckbox">
<label class="form-check-label" for="1starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(3)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="2starCheckbox">
<label class="form-check-label" for="2starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(10)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="3starCheckbox">
<label class="form-check-label" for="3starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(3)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="4starCheckbox">
<label class="form-check-label" for="4starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(34)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="5starCheckbox">
<label class="form-check-label" for="5starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
(120)
</span>
</label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="d-grid">
<button type="button" class="btn btn-white btn-transition">Clear all</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Navbar Collapse -->
</div>
<!-- End Navbar -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card Grid -->
Component #8
<div class="row align-items-center">
<div class="col-sm mb-3 mb-sm-0">
<h6 class="mb-0">110 products</h6>
</div>
<div class="col-sm-auto">
<div class="d-sm-flex justify-content-sm-end align-items-center">
<!-- Select -->
<div class="mb-2 mb-sm-0 me-sm-2">
<select class="form-select form-select-sm">
<option value="Relevance" selected>Relevance</option>
<option value="mostRecent">Most recent</option>
</select>
</div>
<!-- End Select -->
<!-- Select -->
<div class="mb-2 mb-sm-0 me-sm-2">
<select class="form-select form-select-sm">
<option value="alphabeticalOrderSelect1" selected>A-to-Z</option>
<option value="alphabeticalOrderSelect2">Z-to-A</option>
</select>
</div>
<!-- End Select -->
<!-- Nav -->
<ul class="nav nav-segment">
<li class="nav-item">
<a class="nav-link" href="../demo-shop/products-grid.html">
<i class="bi-grid-fill"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../demo-shop/products-list.html">
<i class="bi-list"></i>
</a>
</li>
</ul>
<!-- End Nav -->
</div>
</div>
</div>
<!-- End Row -->
Component #9
<!-- Filter Form -->
<div class="container content-space-1">
<form>
<div class="row gx-2">
<div class="col-lg mb-2 mb-lg-0">
<!-- Form -->
<label for="searchPropertyFilterForm" class="visually-hidden form-label">Search property</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-search"></i>
</span>
<input type="text" class="form-control form-control-sm" id="searchPropertyFilterForm" placeholder="Search property" aria-label="Search property" value="London, England">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-auto mb-2 mb-lg-0">
<!-- Dropdown -->
<div class="dropdown">
<a class="btn btn-white btn-sm dropdown-toggle" href="#" id="priceFilterFormDropdown" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Price</a>
<div class="dropdown-menu dropdown-menu-end dropdown-card" aria-labelledby="priceFilterFormDropdown" style="min-width: 21rem;">
<!-- Card -->
<div class="card card-sm">
<div class="card-body">
<!-- Bar Chart -->
<div class="position-relative overflow-hidden" style="height: 6rem; width: 18rem;">
<div class="position-absolute w-100 overflow-hidden">
<div style="height: 6rem; width: 18rem;">
<canvas class="js-chart"
data-hs-chartjs-options='{
"type": "bar",
"data": {
"labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
"datasets": [{
"data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
"backgroundColor": "#e7eaf3",
"borderColor": "#e7eaf3"
}]
},
"options": {
"responsive": true,
"scales": {
"yAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
},
"ticks": {
"beginAtZero": true
}
}],
"xAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
}
}]
},
"tooltips": {
"custom": false
}
}
}'></canvas>
</div>
</div>
<div id="foregroundBarChartDoubleResult" class="position-absolute overflow-hidden">
<div style="height: 6rem; width: 18rem;">
<canvas class="js-chart"
data-hs-chartjs-options='{
"type": "bar",
"data": {
"labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
"datasets": [{
"data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
"backgroundColor": "#377dff",
"borderColor": "#377dff"
}]
},
"options": {
"scales": {
"yAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
},
"ticks": {
"beginAtZero": true
}
}],
"xAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
}
}]
},
"tooltips": {
"custom": false
}
}
}'></canvas>
</div>
</div>
</div>
<!-- End Bar Chart -->
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 1000
},
"start": [250, 750],
"result_min_target_el": "#rangeSliderExampleDouble4MinResult",
"result_max_target_el": "#rangeSliderExampleDouble4MaxResult",
"foreground_target_el": "#foregroundBarChartDoubleResult"
}'>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col">
<span class="d-block small mb-1">Min price:</span>
<input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MinResult">
</div>
<!-- End Col -->
<div class="col">
<span class="d-block small mb-1">Max price:</span>
<input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MaxResult">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<div class="card-footer border-top">
<div class="d-flex justify-content-end gap-2">
<a class="btn btn-white btn-sm" href="#">Clear</a>
<a class="btn btn-primary btn-sm" href="#">Save</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Dropdown -->
</div>
<!-- End Col -->
<div class="col-auto mb-2 mb-lg-0">
<!-- Dropdown -->
<div class="dropdown">
<a class="btn btn-white btn-sm dropdown-toggle" href="#" id="bedsFilterFormDropdown" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">All beds</a>
<div class="dropdown-menu dropdown-menu-end dropdown-card" aria-labelledby="bedsFilterFormDropdown" style="min-width: 25rem;">
<!-- Card -->
<div class="card card-sm">
<div class="card-body">
<!-- Radio Button Group -->
<div class="btn-group btn-group-segment d-flex" role="group" aria-label="Beds radio button group">
<input type="radio" class="btn-check flex-fill" name="bedsBtnRadio" id="bedsBtnRadioStudio" autocomplete="off" checked>
<label class="btn btn-sm" for="bedsBtnRadioStudio">Studio</label>
<input type="radio" class="btn-check flex-fill" name="bedsBtnRadio" id="bedsBtnRadio1" autocomplete="off">
<label class="btn btn-sm" for="bedsBtnRadio1">1+</label>
<input type="radio" class="btn-check flex-fill" name="bedsBtnRadio" id="bedsBtnRadio2" autocomplete="off">
<label class="btn btn-sm" for="bedsBtnRadio2">2+</label>
<input type="radio" class="btn-check flex-fill" name="bedsBtnRadio" id="bedsBtnRadio3" autocomplete="off">
<label class="btn btn-sm" for="bedsBtnRadio3">3+</label>
<input type="radio" class="btn-check flex-fill" name="bedsBtnRadio" id="bedsBtnRadio4" autocomplete="off">
<label class="btn btn-sm" for="bedsBtnRadio4">4+</label>
</div>
<!-- End Radio Button Group -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Dropdown -->
</div>
<!-- End Col -->
<div class="col-auto mb-2 mb-lg-0">
<!-- Dropdown -->
<div class="dropdown">
<a class="btn btn-white btn-sm dropdown-toggle" href="#" id="propertyTypeFilterFormDropdown" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Property type</a>
<div class="dropdown-menu dropdown-menu-end dropdown-card" aria-labelledby="propertyTypeFilterFormDropdown" style="min-width: 20rem;">
<!-- Card -->
<div class="card card-sm">
<div class="card-body">
<div class="d-grid gap-2">
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="propertyTypeHouseCheckbox" checked>
<label class="form-check-label" for="propertyTypeHouseCheckbox">
House
<span class="d-block small text-muted">Find a cozy place</span>
</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="propertyTypeFlatsCheckbox">
<label class="form-check-label" for="propertyTypeFlatsCheckbox">
Flats
<span class="d-block small text-muted">Flats for sale or to rent</span>
</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="propertyTypeMultiFamilyCheckbox" checked>
<label class="form-check-label" for="propertyTypeMultiFamilyCheckbox">
Multi-family
<span class="d-block small text-muted">Multi-family houses or flats</span>
</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="propertyTypeFarmsLandCheckbox">
<label class="form-check-label" for="propertyTypeFarmsLandCheckbox">
Farms/land
<span class="d-block small text-muted">Own a property for farming</span>
</label>
</div>
<!-- End Check -->
</div>
</div>
<div class="card-footer border-top">
<div class="d-flex justify-content-end gap-2">
<a class="btn btn-white btn-sm" href="#">Clear</a>
<a class="btn btn-primary btn-sm" href="#">Save</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Dropdown -->
</div>
<!-- End Col -->
<div class="col-auto mb-2 mb-lg-0">
<a class="btn btn-white btn-sm" href="#" data-bs-toggle="modal" data-bs-target="#realEstateMoreFiltersModal">
<i class="bi-sliders me-2"></i> More
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</form>
</div>
<!-- End Filter Form -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Real Estate More Filters Modal -->
<div class="modal fade" id="realEstateMoreFiltersModal" tabindex="-1" aria-labelledby="realEstateMoreFiltersModalLabel" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h3 class="modal-title" id="realEstateMoreFiltersModalLabel">More filters</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<label class="input-label">Status</label>
<!-- Radio Button Group -->
<div class="btn-group btn-group-segment d-flex mb-4" role="group" aria-label="Status radio button group">
<input type="radio" class="btn-check flex-fill" name="statusBtnRadioMoreFilters" id="statusBtnRadioBuyMoreFilters" autocomplete="off" checked>
<label class="btn btn-sm" for="statusBtnRadioBuyMoreFilters">Buy</label>
<input type="radio" class="btn-check flex-fill" name="statusBtnRadioMoreFilters" id="statusBtnRadioRentMoreFilters" autocomplete="off">
<label class="btn btn-sm" for="statusBtnRadioRentMoreFilters">Rent</label>
<input type="radio" class="btn-check flex-fill" name="statusBtnRadioMoreFilters" id="statusBtnRadioSoldMoreFilters" autocomplete="off">
<label class="btn btn-sm" for="statusBtnRadioSoldMoreFilters">Sold</label>
</div>
<!-- End Radio Button Group -->
<div class="mb-4">
<label for="featuresLabelMoreFilters" class="form-label">Features</label>
<!-- Select -->
<select id="featuresLabelMoreFilters" class="js-select form-select" multiple
data-hs-tom-select-options='{
"hideSearch": true
}'>
<option value="bedValueAny" selected>Any</option>
<option value="Pets allowed">Pets allowed</option>
<option value="Parking lot">Parking lot</option>
<option value="Balcony">Balcony</option>
<option value="Garden">Garden</option>
<option value="Laundry">Laundry</option>
<option value="Heating">Heating</option>
<option value="AC">AC</option>
</select>
<!-- End Select -->
</div>
<div class="row gx-3">
<div class="col-6">
<div class="mb-4">
<label for="bedsLabelMoreFilters" class="form-label">Beds</label>
<!-- Select -->
<select id="bedsLabelMoreFilters" class="js-select form-select"
data-hs-tom-select-options='{
"hideSearch": true
}'>
<option value="bedValueAny" selected>Any</option>
<option value="bedValueMin1">1</option>
<option value="bedValueMin2">2</option>
<option value="bedValueMin3">3</option>
<option value="bedValueMin4">4</option>
<option value="bedValueMin5">5</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Col -->
<div class="col-6">
<div class="mb-4">
<label for="bathLabelMoreFilters" class="form-label">Baths</label>
<!-- Select -->
<select id="bathLabelMoreFilters" class="js-select form-select"
data-hs-tom-select-options='{
"hideSearch": true
}'>
<option value="bedValueAny" selected>Any</option>
<option value="bedValueMax1">1</option>
<option value="bedValueMax2">2</option>
<option value="bedValueMax3">3</option>
<option value="bedValueMax4">4</option>
<option value="bedValueMax5">5</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<label for="squareFeetLabelMoreFilters" class="form-label">Square feet</label>
<div class="row gx-3">
<div class="col-6">
<div class="mb-4">
<input type="text" class="form-control" id="squareFeetLabelMoreFilters" placeholder="No min">
</div>
</div>
<!-- End Col -->
<div class="col-6">
<div class="mb-4">
<input type="text" class="form-control" placeholder="No max">
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="mb-4">
<label for="lotSizeLabelMoreFilters" class="form-label">Lot size</label>
<!-- Select -->
<select id="lotSizeLabelMoreFilters" class="js-select form-select"
data-hs-tom-select-options='{
"hideSearch": true
}'>
<option value="No Min">No Min</option>
<option value="2000+ sqft">2000+ sqft</option>
<option value="3000+ sqft">3000+ sqft</option>
<option value="4000+ sqft">4000+ sqft</option>
<option value="5000+ sqft">5000+ sqft</option>
<option value="7500+ sqft">7500+ sqft</option>
<option value="0.25+ acre / 10890+ sqft">0.25+ acre / 10890+ sqft</option>
<option value="0.5+ acre / 21780+ sqft">0.5+ acre / 21780+ sqft</option>
<option value="1+ acre">1+ acre</option>
<option value="2+ acre">2+ acre</option>
<option value="5+ acre">5+ acre</option>
<option value="10+ acre">10+ acre</option>
</select>
<!-- End Select -->
</div>
<div class="mb-4">
<label for="yearBuiltLabelMoreFilters" class="form-label">Year built</label>
<div class="row gx-3">
<div class="col-6">
<input type="text" class="form-control" id="yearBuiltLabelMoreFilters" placeholder="Min year">
</div>
<!-- End Col -->
<div class="col-6">
<input type="text" class="form-control" placeholder="Max year">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Body -->
<div class="card-footer border-top">
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white" href="#">Clear</a>
<a class="btn btn-primary" href="#">Show 100+ homes</a>
</div>
</div>
</div>
</div>
</div>
<!-- ========== END SECONDARY CONTENTS ========== -->
<link rel="stylesheet" href="../assets/vendor/chart.js/dist/Chart.min.css">
<link rel="stylesheet" href="../assets/vendor/nouislider/dist/nouislider.min.css">
<link rel="stylesheet" href="../assets/vendor/tom-select/dist/css/tom-select.bootstrap5.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../assets/vendor/nouislider/dist/nouislider.min.js"></script>
<script src="../assets/vendor/tom-select/dist/js/tom-select.complete.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF CHARTJS
// =======================================================
document.querySelectorAll('.js-chart').forEach(item => {
HSCore.components.HSChartJS.init(item)
})
var rangeReady = false
document.querySelector('#priceFilterFormDropdown').addEventListener('shown.bs.dropdown', el => {
if (!rangeReady) {
HSCore.components.HSNoUISlider.init('.js-nouislider')
}
return rangeReady = true
})
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select')
})()
</script>