Forms: Search
Component #1
<!-- Search -->
<div class="bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
<div class="container py-4">
<div class="w-lg-75 mx-lg-auto">
<form>
<!-- Input Card -->
<div class="input-card">
<div class="input-card-form">
<div class="input-group input-group-merge">
<label for="searchAnswersForm" class="form-label visually-hidden">Search for answers</label>
<span class="input-group-prepend input-group-text">
<i class="bi-search"></i>
</span>
<input type="text" class="form-control" id="searchAnswersForm" placeholder="Search for answers" aria-label="Search for answers">
</div>
</div>
<button type="button" class="btn btn-primary btn-icon">
<i class="bi-arrow-right"></i>
</button>
</div>
<!-- End Input Card -->
</form>
</div>
</div>
</div>
<!-- End Search -->
Component #2
24 Results for "Developer tools"
<!-- Search -->
<div class="mb-4">
<div class="mb-3">
<h4>24 Results <span class="text-body small">for "Developer tools"</span></h4>
</div>
<form>
<!-- Input Card -->
<div class="input-card border">
<div class="input-card-form">
<label for="searchAppsForm" class="form-label visually-hidden">Search for apps</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" id="searchAppsForm" placeholder="Search for apps" aria-label="Search for apps">
</div>
</div>
<button type="button" class="btn btn-primary">
<i class="bi-arrow-right"></i>
</button>
</div>
<!-- End Input Card -->
</form>
</div>
<!-- End Search -->
Component #3
Limit search to:
<!-- Hero -->
<div class="gradient-x-three-sm-primary">
<div class="container content-space-2">
<form>
<!-- Input Card -->
<div class="input-card input-card-sm mb-3">
<div class="input-card-form">
<label for="jobTitleForm" class="form-label visually-hidden">工作、职位、技能或公司</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" id="jobTitleForm" placeholder="工作、职位、技能或公司" aria-label="工作、职位、技能或公司">
</div>
</div>
<div class="input-card-form">
<label for="cityForm" class="form-label visually-hidden">城市、州或邮政编码</label>
<div class="input-group input-group-merge">
<span class="input-group-prepend input-group-text">
<i class="bi-geo-alt"></i>
</span>
<input type="text" class="form-control" id="cityForm" placeholder="城市、州或邮政编码" aria-label="城市、州或邮政编码">
</div>
</div>
<button type="button" class="btn btn-primary">Search</button>
</div>
<!-- End Input Card -->
</form>
<div class="row align-items-center">
<div class="col-md-auto mb-3 mb-lg-0">
<h6 class="mb-1">Limit search to:</h6>
</div>
<!-- End Col -->
<div class="col-md mb-3 mb-lg-0">
<!-- Check -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="jobSearchToCheckbox1" value="option1" checked>
<label class="form-check-label" for="jobSearchToCheckbox1">Job title</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="jobSearchToCheckbox2" value="option2">
<label class="form-check-label" for="jobSearchToCheckbox2">Skills</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="jobSearchToCheckbox3" value="option3">
<label class="form-check-label" for="jobSearchToCheckbox3">Companies</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="jobSearchToCheckbox4" value="option4">
<label class="form-check-label" for="jobSearchToCheckbox4">Field of study</label>
</div>
<!-- End Check -->
</div>
<div class="col-md-auto">
<!-- Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="remoteOnlySwitch">
<label class="form-check-label" for="remoteOnlySwitch">Remote only</label>
</div>
<!-- End Switch -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Hero -->