Filters Form Layouts
Component #1
<!-- Form Filters -->
<div class="container">
<form>
<div class="row gx-2 gx-md-3">
<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" 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" 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" 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>
</div>
<!-- End Form Filters -->