Logo v3.2.2
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v3.2.2
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Foundations
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Testimonials
  • Pricing
  • Team Sections
  • Call-to-Action (CTA)
  • Gallery
  • Clients
  • FAQ
  • Comments
  • User Profile
  • Sidebar Examples
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Subscribe
  • Contact / Footer
  • Contact Sections
  • Footer

Form Layouts: Filter

Component #1

  • Preview
  • HTML

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 -->