Form Layouts: Filter
Component #1
Explore opportunities
We're looking for passionate, self-motivated and daring individuals to join our team.
<!-- Form Filter -->
<div id="openingsSection" class="container content-space-1">
<!-- Heading -->
<div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10">
<h2>Explore opportunities</h2>
<p>We're looking for passionate, self-motivated and daring individuals to join our team.</p>
</div>
<!-- End Heading -->
<!-- Form -->
<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-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="Athens">Athens</option>
<option value="Barcelona">Barcelona</option>
<option value="Berlin">Berlin</option>
<option value="Brussels">Brussels</option>
<option value="Chicago">Chicago</option>
<option value="Dubai">Dubai</option>
<option value="Ebene">Ebene</option>
<option value="Hong Kong">Hong Kong</option>
<option value="London">London</option>
<option value="Melbourne">Melbourne</option>
<option value="New York City">New York City</option>
<option value="Paris">Paris</option>
<option value="Perth">Perth</option>
<option value="Porto">Porto</option>
<option value="Riyadh">Riyadh</option>
<option value="San Francisco">San Francisco</option>
<option value="Shanghai">Shanghai</option>
<option value="Singapore">Singapore</option>
<option value="Tallinn">Tallinn</option>
<option value="Vienna</p>">Vienna</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 -->
</div>
<!-- End Form Filter -->