# Listing Search Forms

Booking comes with many Listing search styles. Checkout all search style

#### Hotel search form

###### Check Availability

Location
Check in - out
Guests & rooms

    <div class="row">
      <div class="col-xl-10">
        <!-- Title -->
        <h6 class="d-none d-xl-block mb-3">Check Availability</h6>

        <!-- Booking from START -->
        <form class="bg-mode shadow rounded-3 position-relative p-4 pe-md-5 pb-5 pb-md-4">
          <div class="row g-4 align-items-center">
            <!-- Location -->
            <div class="col-lg-4">
              <div class="form-control-border form-control-transparent form-fs-md d-flex">
                <!-- Icon -->
                <i class="bi bi-geo-alt fs-3 me-2 mt-2"></i>
                <!-- Select input -->
                <div class="flex-grow-1">
                  <label class="form-label">Location</label>
                  <select class="form-select js-choice" data-search-enabled="true">
                    <option value="">Select location</option>
                    <option>San Jacinto, USA</option>
                    <option>North Dakota, Canada</option>
                    <option>West Virginia, Paris</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Check in -->
            <div class="col-lg-4">
              <div class="d-flex">
                <!-- Icon -->
                <i class="bi bi-calendar fs-3 me-2 mt-2"></i>
                <!-- Date input -->
                <div class="form-control-border form-control-transparent form-fs-md">
                  <label class="form-label">Check in - out</label>
                  <input type="text" class="form-control flatpickr" data-mode="range" placeholder="Select date" value="19 Sep to 28 Sep">
                </div>
              </div>
            </div>

            <!-- Guest -->
            <div class="col-lg-4">
              <div class="form-control-border form-control-transparent form-fs-md d-flex">
                <!-- Icon -->
                <i class="bi bi-person fs-3 me-2 mt-2"></i>
                <!-- Dropdown input -->
                <div class="w-100">
                  <label class="form-label">Guests & rooms</label>
                  <div class="dropdown guest-selector me-2">
                    <input type="text" class="form-guest-selector form-control selection-result" value="2 Guests 1 Room" data-bs-auto-close="outside" data-bs-toggle="dropdown">

                    <!-- dropdown items -->
                    <ul class="dropdown-menu guest-selector-dropdown">
                      <!-- Adult -->
                      <li class="d-flex justify-content-between">
                        <div>
                          <h6 class="mb-0">Adults</h6>
                          <small>Ages 13 or above</small>
                        </div>

                        <div class="hstack gap-1 align-items-center">
                          <button type="button" class="btn btn-link adult-remove p-0 mb-0"><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
                          <h6 class="guest-selector-count mb-0 adults">2</h6>
                          <button type="button" class="btn btn-link adult-add p-0 mb-0"><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
                        </div>
                      </li>

                      <!-- Divider -->
                      <li class="dropdown-divider"></li>

                      <!-- Child -->
                      <li class="d-flex justify-content-between">
                        <div>
                          <h6 class="mb-0">Child</h6>
                          <small>Ages 13 below</small>
                        </div>

                        <div class="hstack gap-1 align-items-center">
                          <button type="button" class="btn btn-link child-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
                          <h6 class="guest-selector-count mb-0 child">0</h6>
                          <button type="button" class="btn btn-link child-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
                        </div>
                      </li>

                      <!-- Divider -->
                      <li class="dropdown-divider"></li>

                      <!-- Rooms -->
                      <li class="d-flex justify-content-between">
                        <div>
                          <h6 class="mb-0">Rooms</h6>
                          <small>Max room 8</small>
                        </div>

                        <div class="hstack gap-1 align-items-center">
                          <button type="button" class="btn btn-link room-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
                          <h6 class="guest-selector-count mb-0 rooms">1</h6>
                          <button type="button" class="btn btn-link room-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Button -->
          <div class="btn-position-md-middle">
            <a class="icon-lg btn btn-round btn-primary mb-0" href="#"><i class="bi bi-search fa-fw"></i></a>
          </div>
        </form>
        <!-- Booking from END -->
      </div>
    </div>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Flight search form

From
To
Departure
Find ticket
From
To
Departure
Return
Find ticket

    <form class="bg-mode position-relative px-3 px-sm-4 pt-4 mb-4 mb-sm-0">

      <!-- Svg decoration -->
      <figure class="position-absolute top-0 start-0 h-100 ms-n2 ms-sm-n1">
        <svg class="h-100" viewBox="0 0 12.9 324" style="enable-background:new 0 0 12.9 324;">
          <path class="fill-mode" d="M9.8,316.4c1.1-26.8,2-53.4,1.9-80.2c-0.1-18.2-0.8-36.4-1.2-54.6c-0.2-8.9-0.2-17.7,0.8-26.6 c0.5-4.5,1.1-9,1.4-13.6c0.1-1.9,0.1-3.7,0.1-5.6c-0.2-0.2-0.6-1.5-0.2-3.1c-0.3-1.8-0.4-3.7-0.4-5.5c-1.2-3-1.8-6.3-1.7-9.6 c0.9-19,0.5-38.1,0.8-57.2c0.3-17.1,0.6-34.2,0.2-51.3c-0.1-0.6-0.1-1.2-0.1-1.7c0-0.8,0-1.6,0-2.4c0-0.5,0-1.1,0-1.6 c0-1.2,0-2.3,0.2-3.5H0v11.8c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V31c3.3,0,6.1,2.7,6.1,6.1S3.3,43.3,0,43.3v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 s-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V324h9.5C9.6,321.4,9.7,318.8,9.8,316.4z"/>
        </svg>
      </figure>

      <!-- Svg decoration -->
      <figure class="position-absolute top-0 end-0 h-100 rotate-180 me-n2 me-sm-n1">
        <svg class="h-100" viewBox="0 0 21 324" style="enable-background:new 0 0 21 324;">
          <path class="fill-mode" d="M9.8,316.4c1.1-26.8,2-53.4,1.9-80.2c-0.1-18.2-0.8-36.4-1.2-54.6c-0.2-8.9-0.2-17.7,0.8-26.6 c0.5-4.5,1.1-9,1.4-13.6c0.1-1.9,0.1-3.7,0.1-5.6c-0.2-0.2-0.6-1.5-0.2-3.1c-0.3-1.8-0.4-3.7-0.4-5.5c-1.2-3-1.8-6.3-1.7-9.6 c0.9-19,0.5-38.1,0.8-57.2c0.3-17.1,0.6-34.2,0.2-51.3c-0.1-0.6-0.1-1.2-0.1-1.7c0-0.8,0-1.6,0-2.4c0-0.5,0-1.1,0-1.6 c0-1.2,0-2.3,0.2-3.5H0v11.8c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V31c3.3,0,6.1,2.7,6.1,6.1S3.3,43.3,0,43.3v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 s-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V324h9.5C9.6,321.4,9.7,318.8,9.8,316.4z"/>
        </svg>
      </figure>

      <div class="row g-4">

        <!-- Nav tabs START -->
        <div class="col-lg-6">
          <ul class="nav nav-pills nav-pills-dark" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link rounded-start rounded-0 mb-0 active" id="pills-one-way-tab" data-bs-toggle="pill" data-bs-target="#pills-one-way" type="button" role="tab" aria-selected="true">One Way</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link rounded-end rounded-0 mb-0" id="pills-round-trip-tab" data-bs-toggle="pill" data-bs-target="#pills-round-trip" type="button" role="tab" aria-selected="false">Round Trip</button>
            </li>
          </ul>
        </div>
        <!-- Nav tabs END -->

        <!-- Ticket class -->
        <div class="col-lg-3 ms-auto">
          <div class="form-control-bg-light form-fs-md">
            <select class="form-select js-choice">
              <option value="">Select Class</option>
              <option>Economy</option>
              <option>Premium Economy</option>
              <option>Business</option>
              <option>First Class</option>
            </select>
          </div>
        </div>

        <!-- Ticket Travelers -->
        <div class="col-lg-3 ms-auto">
          <div class="form-control-bg-light form-fs-md">
            <select class="form-select js-choice">
              <option value="">Select Travelers</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
          </div>
        </div>

        <!-- Tab content START -->
        <div class="tab-content mt-4" id="pills-tabContent">
          <!-- One way tab START -->
          <div class="tab-pane fade show active" id="pills-one-way" role="tabpanel" aria-labelledby="pills-one-way-tab">
            <div class="row g-4">
              <!-- Leaving From -->
              <div class="col-md-6 col-lg-4 position-relative">
                <div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
                  <!-- Input field -->
                  <label class="mb-1"><i class="bi bi-geo-alt me-2"></i>From</label>
                  <select class="form-select js-choice" data-search-enabled="true">
                    <option value="">Select location</option>
                    <option>San Jacinto, USA</option>
                    <option>North Dakota, Canada</option>
                    <option>West Virginia, Paris</option>
                  </select>
                </div>

                <!-- Auto fill button -->
                <div class="btn-flip-icon mt-3 mt-md-0">
                  <button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
              </div>
              </div>

              <!-- Going To -->
              <div class="col-md-6 col-lg-4">
                <div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
                  <!-- Input field -->
                  <label class="mb-1"><i class="bi bi-send me-2"></i>To</label>
                  <select class="form-select js-choice" data-search-enabled="true">
                    <option value="">Select location</option>
                    <option>San Jacinto, USA</option>
                    <option>North Dakota, Canada</option>
                    <option>West Virginia, Paris</option>
                  </select>
                </div>
              </div>

              <!-- Departure -->
              <div class="col-lg-4">
                <div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
                  <label class="mb-1"><i class="bi bi-calendar me-2"></i>Departure</label>
                  <input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
                </div>
              </div>

              <div class="col-12 text-end pt-0">
                <a  class="btn btn-primary mb-n4" href="#">Find ticket <i class="bi bi-arrow-right ps-3"></i></a>
              </div>
            </div>
          </div>
          <!-- One way tab END -->

          <!-- Round way tab END -->
          <div class="tab-pane fade" id="pills-round-trip" role="tabpanel" aria-labelledby="pills-round-trip-tab">
            <div class="row g-4">

              <!-- Leaving From -->
              <div class="col-md-6 col-xl-3 position-relative">
                <div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
                  <!-- Input field -->
                  <label class="mb-1"><i class="bi bi-geo-alt me-2"></i>From</label>
                  <select class="form-select js-choice" data-search-enabled="true">
                    <option value="">Select location</option>
                    <option>San Jacinto, USA</option>
                    <option>North Dakota, Canada</option>
                    <option>West Virginia, Paris</option>
                  </select>
                </div>

                <!-- Auto fill button -->
                <div class="btn-flip-icon mt-3 mt-md-0">
                  <button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
                </div>
              </div>

              <!-- Going To -->
              <div class="col-md-6 col-xl-3">
                <div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
                  <!-- Input field -->
                  <label class="mb-1"><i class="bi bi-send me-2"></i>To</label>
                  <select class="form-select js-choice" data-search-enabled="true">
                    <option value="">Select location</option>
                    <option>San Jacinto, USA</option>
                    <option>North Dakota, Canada</option>
                    <option>West Virginia, Paris</option>
                  </select>
                </div>
              </div>

              <!-- Departure -->
              <div class="col-md-6 col-xl-3">
                <div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
                  <label class="mb-1"><i class="bi bi-calendar me-2"></i>Departure</label>
                  <input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
                </div>
              </div>

              <!-- Return -->
              <div class="col-md-6 col-xl-3">
                <div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
                  <label class="mb-1"><i class="bi bi-calendar me-2"></i>Return</label>
                  <input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
                </div>
              </div>

              <div class="col-12 text-end pt-0">
                <a  class="btn btn-primary mb-n4" href="#">Find ticket <i class="bi bi-arrow-right ps-3"></i></a>
              </div>
            </div>
          </div>
          <!-- Round way tab END -->
        </div>
        <!-- Tab content END -->
      </div>
    </form>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Tour search form

Location
Date
Tour type
Take a Tour

    <form class="bg-mode shadow rounded-3 p-4">
      <div class="row g-4 align-items-center">

        <div class="col-xl-10">
          <div class="row g-4">
            <!-- Location -->
            <div class="col-md-6 col-lg-4">
              <label class="h6 fw-normal mb-0"><i class="bi bi-geo-alt text-primary me-1"></i>Location</label>
              <!-- Input field -->
              <div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
                <select class="form-select js-choice" data-search-enabled="true">
                  <option value="">Select location</option>
                  <option>San Jacinto, USA</option>
                  <option>North Dakota, Canada</option>
                  <option>West Virginia, Paris</option>
                </select>
              </div>
            </div>

            <!-- Check in -->
            <div class="col-md-6 col-lg-4">
              <label class="h6 fw-normal mb-0"><i class="bi bi-calendar text-primary me-1"></i>Date</label>
              <!-- Input field -->
              <div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
                <input type="text" class="form-control flatpickr py-2" data-date-format="d M Y" placeholder="Choose a date">
              </div>
            </div>

            <!-- Guest -->
            <div class="col-md-6 col-lg-4">
              <label class="h6 fw-normal mb-0"><i class="fa-solid fa-person-skating text-primary me-1"></i>Tour type</label>
              <!-- Input field -->
              <div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
                <select class="form-select js-choice" data-search-enabled="true">
                  <option value="">Select type</option>
                  <option>Adventure</option>
                  <option>Beach</option>
                  <option>Desert</option>
                  <option>History</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- Button -->
        <div class="col-xl-2">
          <div class="d-grid">
            <a href="#" class="btn btn-lg btn-dark mb-0">Take a Tour</a>
          </div>
        </div>
      </div>
    </form>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Cab search form

##### Book Your Online Cab

Pickup
Drop
Pickup Date
Pickup time
Pickup
Drop
Pickup Date
Pickup time
Return Date
Return time

    <!-- Search START -->
    <div class="col-11 col-sm-10 col-lg-8 col-xl-6">
    	<div class="card shadow pb-0">

    		<!-- Card header -->
    		<div class="card-header border-bottom p-3 p-sm-4">
    			<h5 class="card-title mb-0">Book Your Online Cab</h5>
    		</div>

    		<!-- Card body START -->
    		<form class="card-body form-control-border p-3 p-sm-4">
    			<!-- Tabs START -->
    			<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    				<div class="form-check form-check-inline active" id="cab2-one-way-tab" data-bs-toggle="pill" data-bs-target="#cab2-one-way" role="tab" aria-controls="cab2-one-way" aria-selected="true">
    					<input class="form-check-input" type="radio" name="inlineRadioOptions" id="cabRadio1" value="option1" checked>
    					<label class="form-check-label" for="cabRadio1">One Way</label>
    				</div>
    				<div class="form-check form-check-inline" id="cab2-round-way-tab" data-bs-toggle="pill" data-bs-target="#cab2-round-way" role="tab" aria-controls="cab2-round-way" aria-selected="false">
    					<input class="form-check-input" type="radio" name="inlineRadioOptions" id="cabRadio2" value="option2">
    					<label class="form-check-label" for="cabRadio2">Round Trip</label>
    				</div>
    			</div>
    			<!-- Tabs END -->

    			<!-- Tabs content START -->
    			<div class="tab-content my-4" id="pills-tabContent">
    				<!-- One way START -->
    				<div class="tab-pane fade show active" id="cab2-one-way" role="tabpanel" aria-labelledby="cab2-one-way-tab">
    					<div class="row g-2 g-md-4">
    						<!-- Pickup -->
    						<div class="col-md-6 position-relative">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small">Pickup</label>
    								<select class="form-select js-choice" data-search-enabled="true">
    									<option value="">Select location</option>
    									<option>New York</option>
    									<option>Canada</option>
    									<option>Paris</option>
    								</select>
    							</div>

    							<!-- Auto fill button -->
    							<div class="btn-flip-icon z-index-9 mt-2 mt-md-1">
    								<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    							</div>
    						</div>

    						<!-- Drop -->
    						<div class="col-md-6 text-md-end">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small ms-3 ms-md-0 me-md-3">Drop</label>
    								<select class="form-select js-choice" data-search-enabled="true">
    									<option value="">Select Location</option>
    									<option>Canada</option>
    									<option>New York</option>
    									<option>Paris</option>
    								</select>
    							</div>
    						</div>

    						<!-- Date -->
    						<div class="col-md-6">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small">Pickup Date</label>
    								<input type="text" class="form-control flatpickr" placeholder="Select date">
    							</div>
    						</div>

    						<!-- Time -->
    						<div class="col-md-6 text-md-end">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small ms-3 ms-md-0 me-md-3">Pickup time</label>
    								<input type="text" class="form-control flatpickr text-md-end" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    							</div>
    						</div>

    					</div>
    				</div>
    				<!-- One way END -->

    				<!-- Round trip START -->
    				<div class="tab-pane fade" id="cab2-round-way" role="tabpanel" aria-labelledby="cab2-round-way-tab">
    					<div class="row g-2 g-md-4">
    						<!-- Pickup -->
    						<div class="col-md-6 position-relative">
    							<label class="form-label small">Pickup</label>
    							<div class="form-fs-lg form-control-transparent">
    								<select class="form-select js-choice" data-search-enabled="true">
    									<option value="">Select Location</option>
    									<option>New York</option>
    									<option>Canada</option>
    									<option>Paris</option>
    								</select>
    							</div>

    							<!-- Auto fill button -->
    							<div class="btn-flip-icon z-index-9 mt-2 mt-md-1">
    								<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    							</div>
    						</div>

    						<!-- Drop -->
    						<div class="col-sm-6 text-sm-end">
    							<label class="form-label small ms-3 ms-md-0 me-md-3">Drop</label>
    							<div class="form-fs-lg form-control-transparent">
    								<select class="form-select js-choice" data-search-enabled="true">
    									<option value="">Select Location</option>
    									<option>Canada</option>
    									<option>New York</option>
    									<option>Paris</option>
    								</select>
    							</div>
    						</div>

    						<!-- Date -->
    						<div class="col-sm-6">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small">Pickup Date</label>
    								<input type="text" class="form-control flatpickr" placeholder="Select date">
    							</div>
    						</div>

    						<!-- Time -->
    						<div class="col-sm-6 text-sm-end">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small ms-3 ms-md-0 me-md-3">Pickup time</label>
    								<input type="text" class="form-control flatpickr text-sm-end" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    							</div>
    						</div>

    						<!-- Date -->
    						<div class="col-sm-6">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small">Return Date</label>
    								<input type="text" class="form-control flatpickr" placeholder="Select date">
    							</div>
    						</div>

    						<!-- Time -->
    						<div class="col-sm-6 text-sm-end">
    							<div class="form-fs-lg form-control-transparent">
    								<label class="form-label small ms-3 ms-md-0 me-md-3">Return time</label>
    								<input type="text" class="form-control flatpickr text-sm-end" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    							</div>
    						</div>
    					</div> <!-- Row END -->
    				</div>
    				<!-- Round trip END -->
    			</div>
    			<!-- Tabs content END -->

    			<!-- Button -->
    			<div class="d-grid">
    				<button class="btn btn-dark mb-0">Search Cabs</button>
    			</div>

    		</form>
    		<!-- Card-body END -->
    	</div>
    </div>
    <!-- Search END -->

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Form Inlines

We are
People, Looking for
around
, .

    <div class="row">
    	<div class="col-lg-10 m-auto text-center position-relative z-index-9">
    		<!-- Form START -->
    		<form class="form-control-inline my-5">
    			<div class="d-flex flex-wrap justify-content-center align-items-center">
    				<!-- Select item -->
    				<label class="form-control-inline-text">We are</label>
    				<span class="d-inline-block">
    					<select class="form-select js-choice">
    						<option value="">Select</option>
    						<option>1</option>
    						<option>2</option>
    						<option>3</option>
    						<option>4</option>
    						<option>5</option>
    						<option>5+</option>
    					</select>
    				</span>
    				<!-- Select item -->
    				<label class="form-control-inline-text">People, Looking for</label>
    				<span class="d-inline-block">
    					<select class="form-select js-choice">
    						<option value="">Select</option>
    						<option>Apartment</option>
    						<option>Villa</option>
    						<option>Hotel</option>
    						<option>Hostel</option>
    					</select>
    				</span>

    				<!-- Select item -->
    				<label class="form-control-inline-text">around</label>
    				<span class="d-inline-block">
    					<select class="form-select js-choice" data-search-enabled="true">
    						<option value="">Select</option>
    						<option>California, USA</option>
    						<option>New York, USA</option>
    						<option>London, UK</option>
    					</select>
    				</span>

    				<!-- Date picker -->
    				<label class="form-control-inline-text">,</label>
    				<span class="d-inline-block">
    					<input type="text" class="form-control flatpickr" data-mode="range" placeholder="From - To">
    				</span>

    				<!-- Label -->
    				<label class="form-control-inline-text">.</label>
    			</div>

    			<!-- Button -->
    			<button class="icon-xxl bg-primary btn-dark-hover rounded-circle btn fs-6 text-white p-0 mt-4" type="submit">Search</button>
    		</form>
    		<!-- Form END -->
    	</div>
    </div> <!-- Row END -->

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Form with category

    <div class="row">
    	<!-- Tabs START -->
    	<div class="col-11 col-lg-8 col-xl-6 mx-auto">
    		<ul class="nav nav-tabs nav-bottom-line nav-justified nav-responsive bg-mode rounded-top z-index-9 position-relative pt-2 pb-0 px-4">
    			<li class="nav-item">
    				<a class="nav-link mb-0 active" data-bs-toggle="tab" href="#tab-1-1"><i class="fa-solid fa-hotel fa-fw me-2"></i>Hotel</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link mb-0" data-bs-toggle="tab" href="#tab-1-2"><i class="fa-solid fa-plane fa-fw me-2"></i>Flight</a>
    				</li>
    			<li class="nav-item">
    				<a class="nav-link mb-0" data-bs-toggle="tab" href="#tab-1-3"><i class="fa-solid fa-globe-americas fa-fw me-2"></i>Tour</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link mb-0 pe-0" data-bs-toggle="tab" href="#tab-1-4"><i class="fa-solid fa-car fa-fw me-2"></i>Cabs</a>
    			</li>
    		</ul>
    	</div>
    	<!-- Tabs END -->

    	<!-- Tab content START -->
    	<div class="col-12">
    		<div class="tab-content" id="nav-tabContent">

    			<!-- Tab content item START -->
    			<div class="tab-pane fade show active" id="tab-1-1">
    				<form class="card shadow p-0">
    					<!-- Card header -->
    					<div class="card-header p-4">
    						<h5 class="mb-0"><i class="fa-solid fa-hotel fa-fw me-2"></i>Hotel Booking</h5>
    					</div>

    					<!-- Card body -->
    					<div class="card-body p-4 pt-0">
    						<div class="row g-4">
    							<!-- Location -->
    							<div class="col-12">
    								<div class="form-icon-input form-size-lg form-fs-lg">
    									<select class="form-select js-choice" data-search-enabled="true">
    										<option value="">Search hotel</option>
    										<option>San Jacinto, USA</option>
    										<option>North Dakota, Canada</option>
    										<option>West Virginia, Paris</option>
    									</select>
    									<span class="form-icon"><i class="bi bi-search fs-5"></i></span>
    								</div>
    							</div>

    							<!-- Guest -->
    							<div class="col-lg-4">
    								<div class="form-icon-input form-fs-lg">
    									<div class="dropdown guest-selector me-2">
    										<input type="text" class="form-guest-selector form-control form-control-lg selection-result" placeholder="Select occupant" data-bs-auto-close="outside" data-bs-toggle="dropdown">

    										<!-- dropdown items -->
    										<ul class="dropdown-menu guest-selector-dropdown">
    											<!-- Adult -->
    											<li class="d-flex justify-content-between">
    												<div>
    													<h6 class="mb-0">Adults</h6>
    													<small>Ages 13 or above</small>
    												</div>

    												<div class="hstack gap-1 align-items-center">
    													<button type="button" class="btn btn-link adult-remove p-0 mb-0"><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    													<h6 class="guest-selector-count mb-0 adults">2</h6>
    													<button type="button" class="btn btn-link adult-add p-0 mb-0"><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    												</div>
    											</li>

    											<!-- Divider -->
    											<li class="dropdown-divider"></li>

    											<!-- Child -->
    											<li class="d-flex justify-content-between">
    												<div>
    													<h6 class="mb-0">Child</h6>
    													<small>Ages 13 below</small>
    												</div>

    												<div class="hstack gap-1 align-items-center">
    													<button type="button" class="btn btn-link child-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    													<h6 class="guest-selector-count mb-0 child">0</h6>
    													<button type="button" class="btn btn-link child-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    												</div>
    											</li>

    											<!-- Divider -->
    											<li class="dropdown-divider"></li>

    											<!-- Rooms -->
    											<li class="d-flex justify-content-between">
    												<div>
    													<h6 class="mb-0">Rooms</h6>
    													<small>Max room 8</small>
    												</div>

    												<div class="hstack gap-1 align-items-center">
    													<button type="button" class="btn btn-link room-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    													<h6 class="guest-selector-count mb-0 rooms">1</h6>
    													<button type="button" class="btn btn-link room-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    												</div>
    											</li>
    										</ul>
    									</div>
    									<span class="form-icon"><i class="bi bi-people fs-5"></i></span>
    								</div>
    							</div>

    							<!-- Date -->
    							<div class="col-lg-4">
    								<div class="form-icon-input form-fs-lg">
    									<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/m/y" placeholder="Select check-in date">
    									<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    								</div>
    							</div>

    							<!-- Date -->
    							<div class="col-lg-4">
    								<div class="form-icon-input form-fs-lg">
    									<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/m/y" placeholder="Select check-out date">
    									<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    								</div>
    							</div>

    						</div> <!-- Row END -->

    						<!-- Button -->
    						<div class="text-center pt-0">
    							<a class="btn btn-lg btn-primary mb-n7" href="#">Search Hotel <i class="bi bi-arrow-right ps-3"></i></a>
    						</div>
    					</div>
    				</form>
    			</div>
    			<!-- Tab content item END -->

    			<!-- Tab content item START -->
    			<div class="tab-pane fade" id="tab-1-2">
    				<form class="card shadow p-0">
    					<!-- Card header -->
    					<div class="card-header p-4">
    						<div class="row g-4 align-items-center">
    							<!-- Title -->
    							<div class="col-lg-4 col-xl-6">
    								<h5 class="mb-0"><i class="fa-solid fa-plane fa-fw me-2"></i>Flight Booking</h5>
    							</div>
    							<!-- Radio tab -->
    							<div class="col-md-6 col-lg-4 col-xl-3 ms-auto">
    								<div class="nav nav-pills" id="pills-tab" role="tablist">
    									<div class="form-check form-check-inline active" id="flight-one-way-tab" data-bs-toggle="pill" data-bs-target="#flight-one-way" role="tab" aria-controls="flight-one-way" aria-selected="true">
    										<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
    										<label class="form-check-label" for="inlineRadio1">One Way</label>
    									</div>
    									<div class="form-check form-check-inline" id="flight-round-way-tab" data-bs-toggle="pill" data-bs-target="#flight-round-way" role="tab" aria-controls="flight-round-way" aria-selected="false">
    										<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    										<label class="form-check-label" for="inlineRadio2">Round Trip</label>
    									</div>
    								</div>
    							</div>
    							<!-- Select -->
    							<div class="col-md-6 col-lg-4 col-xl-3 ms-auto">
    								<div class="form-control-bg-light border rounded form-fs-md">
    									<select class="form-select js-choice" aria-label=".form-select-sm">
    										<option value="">Select Class</option>
    										<option>Economy</option>
    										<option>Premium Economy</option>
    										<option>Business</option>
    										<option>First Class</option>
    									</select>
    								</div>
    							</div>
    						</div>
    					</div>

    					<!-- Card body -->
    					<div class="card-body p-4 pt-0">
    						<!-- Tab content START -->
    						<div class="tab-content" id="pills-tabContent">
    							<!-- One way tab START -->
    							<div class="tab-pane fade show active" id="flight-one-way" role="tabpanel" aria-labelledby="flight-one-way-tab">
    								<div class="row g-4">
    									<!-- From -->
    									<div class="col-md-6 position-relative">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Flying from...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    										</div>

    										<!-- Auto fill button -->
    										<div class="btn-flip-icon z-index-9">
    											<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    										</div>
    									</div>

    									<!-- To -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Flying to...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-send fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Date -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y"  placeholder="Select check-in date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Guest -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg" placeholder="Select occupant">
    											<span class="form-icon"><i class="bi bi-people fs-5"></i></span>
    										</div>
    									</div>
    								</div>

    								<!-- Button -->
    								<div class="text-center pt-0">
    									<a class="btn btn-lg btn-primary mb-n7" href="#">Search Flight <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    							</div>
    							<!-- One way trip END -->

    							<!-- Round way tab START -->
    							<div class="tab-pane fade" id="flight-round-way" role="tabpanel" aria-labelledby="flight-round-way-tab">
    								<!-- One way trip START -->
    								<div class="row g-4">
    									<!-- From -->
    									<div class="col-md-6 position-relative">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Flying from...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    										</div>

    										<!-- Auto fill button -->
    										<div class="btn-flip-icon z-index-9">
    											<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    										</div>
    									</div>

    									<!-- To -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Flying to...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-send fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Date -->
    									<div class="col-md-4">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select check-in date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Date -->
    									<div class="col-md-4">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select check-out date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Guest -->
    									<div class="col-md-4">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg" placeholder="Select occupant">
    											<span class="form-icon"><i class="bi bi-people fs-5"></i></span>
    										</div>
    									</div>
    								</div>
    								<!-- Button -->
    								<div class="col-12 text-center pt-0">
    									<a class="btn btn-lg btn-primary mb-n7" href="#">Search Flight <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    								<!-- One way trip END -->
    							</div>
    							<!-- Round way tab END -->
    						</div>
    						<!-- Tab content END -->
    					</div>
    				</form>
    			</div>
    			<!-- Tab content item END -->

    			<!-- Tab content item START -->
    			<div class="tab-pane fade" id="tab-1-3">
    				<form class="card shadow p-0">
    					<!-- Card header -->
    					<div class="card-header p-4">
    						<h5 class="mb-0"><i class="fa-solid fa-globe-americas fa-fw me-2"></i>Tour Booking</h5>
    					</div>

    					<!-- Card body -->
    					<div class="card-body p-4 pt-0">
    						<div class="row g-4">
    							<!-- Location -->
    							<div class="col-lg-4">
    								<div class="form-icon-input form-size-lg form-fs-lg">
    									<select class="form-select js-choice" data-search-enabled="true">
    										<option value="">Select tour location</option>
    										<option>San Jacinto, USA</option>
    										<option>North Dakota, Canada</option>
    										<option>West Virginia, Paris</option>
    									</select>
    									<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    								</div>
    							</div>

    							<!-- Date -->
    							<div class="col-lg-4">
    								<div class="form-icon-input form-fs-lg">
    									<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select date">
    									<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    								</div>
    							</div>

    							<!-- Guest -->
    							<div class="col-lg-4">
    								<div class="form-icon-input form-size-lg form-fs-lg">
    									<select class="form-select js-choice" data-search-enabled="true">
    										<option value="">Select tour type</option>
    										<option>Adventure</option>
    										<option>Beach</option>
    										<option>Desert</option>
    										<option>History</option>
    									</select>
    									<span class="form-icon"><i class="fa-solid fa-person-skating fs-5"></i></span>
    								</div>
    							</div>
    						</div> <!-- Row END -->

    						<!-- Button -->
    						<div class="text-center pt-0">
    							<a class="btn btn-lg btn-primary mb-n7" href="#">Search Tour <i class="bi bi-arrow-right ps-3"></i></a>
    						</div>
    					</div>
    				</form>
    			</div>
    			<!-- Tab content item END -->

    			<!-- Tab content item START -->
    			<div class="tab-pane fade" id="tab-1-4">
    				<form class="card shadow p-0">
    					<!-- Card header -->
    					<div class="card-header d-sm-flex justify-content-between align-items-center p-4">
    						<!-- Title -->
    						<h5 class="mb-3 mb-sm-0"><i class="fa-solid fa-car fa-fw me-2"></i>Cab Booking</h5>

    						<!-- Tabs -->
    						<ul class="nav nav-pills nav-pills-dark" id="pills-tab-2" role="tablist">
    							<li class="nav-item" role="presentation">
    								<button class="nav-link rounded-start rounded-0 mb-0 active" id="pills-one-way-2-tab" data-bs-toggle="pill" data-bs-target="#pills-one-way-2" type="button" role="tab" aria-selected="true">One Way</button>
    							</li>
    							<li class="nav-item" role="presentation">
    								<button class="nav-link rounded-end rounded-0 mb-0" id="pills-round-way-2-tab" data-bs-toggle="pill" data-bs-target="#pills-round-way-2" type="button" role="tab" aria-selected="false">Road Trip</button>
    							</li>
    						</ul>
    					</div>

    					<!-- Card body -->
    					<div class="card-body p-4 pt-0">
    						<!-- Tab content START -->
    						<div class="tab-content" id="pills-tabContent3">
    							<!-- One way tab START -->
    							<div class="tab-pane fade show active" id="pills-one-way-2" role="tabpanel" aria-labelledby="pills-one-way-2-tab">
    								<div class="row g-4">
    									<!-- Pickup -->
    									<div class="col-md-6 position-relative">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Select pickup location...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    										</div>

    										<!-- Auto fill button -->
    										<div class="btn-flip-icon z-index-9">
    											<button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    										</div>
    									</div>

    									<!-- Drop -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Select drop location...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Pickup date -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select pickup date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Pickup time -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select pickup time" data-noCalendar="true" data-enableTime="true">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>
    								</div> <!-- Row END -->
    								<!-- Button -->
    								<div class="text-center pt-0">
    									<a class="btn btn-lg btn-primary mb-n7" href="#">Search Cabs <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    							</div>
    							<!-- One way tab END -->

    							<!-- Round way tab START -->
    							<div class="tab-pane fade" id="pills-round-way-2" role="tabpanel" aria-labelledby="pills-round-way-2-tab">
    								<div class="row g-4">
    									<!-- Pickup -->
    									<div class="col-md-6 position-relative">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Select pickup location...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    										</div>

    										<!-- Auto fill button -->
    										<div class="btn-flip-icon z-index-9">
    											<button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    										</div>
    									</div>

    									<!-- Drop -->
    									<div class="col-md-6">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Select drop location...</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Pickup date -->
    									<div class="col-md-6 col-lg-3">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select pickup date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Pickup time -->
    									<div class="col-md-6 col-lg-3">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select pickup time" data-noCalendar="true" data-enableTime="true">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Drop date -->
    									<div class="col-md-6 col-lg-3">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select return date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Drop time -->
    									<div class="col-md-6 col-lg-3">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select return time" data-noCalendar="true" data-enableTime="true">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>
    								</div> <!-- Row END -->
    								<!-- Button -->
    								<div class="text-center pt-0">
    									<a class="btn btn-lg btn-primary mb-n7" href="#">Search cabs <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    							</div>
    							<!-- Round way tab END -->
    						</div>
    					</div>
    				</form>
    			</div>
    			<!-- Tab content item END -->

    		</div>
    	</div>
    	<!-- Tab content END -->
    </div>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Form border bottom

Destination
Check in
Check Out
Occupant
Tour type

    <div class="col-md-6">
    	<form class="row g-4">
    		<!-- Destination -->
    		<div class="col-12">
    			<label class="small">Destination</label>
    			<div class="form-border-bottom form-control-transparent d-flex align-items-center">
    				<div class="flex-shrink-0 me-2">
    					<!-- Icon -->
    					<i class="bi bi-geo-alt text-secondary d-block"></i>
    				</div>
    				<!-- Input field -->
    				<div class="flex-grow-1">
    					<!-- Cities -->
    					<div class="form-fs-lg">
    						<select class="form-select js-choice h5" data-search-enabled="true" aria-label=".form-select-sm">
    							<option value="">Select location</option>
    							<option>San Jacinto, USA</option>
    							<option>North Dakota, Canada</option>
    							<option>West Virginia, Paris</option>
    						</select>
    					</div>
    				</div>
    			</div>
    		</div>

    		<!-- Check in -->
    		<div class="col-md-6">
    			<label class="small">Check in</label>
    			<div class="form-border-bottom form-control-transparent d-flex align-items-center">
    				<!-- Icon -->
    				<i class="bi bi-calendar text-secondary d-block me-2"></i>
    				<!-- Cities -->
    				<div class="form-fs-lg">
    					<input type="text" class="form-control flatpickr" data-date-format="d/M/Y" placeholder="Select Date">
    				</div>
    			</div>
    		</div>

    		<!-- Check Out -->
    		<div class="col-md-6">
    			<label class="small">Check Out</label>
    			<div class="form-border-bottom form-control-transparent d-flex align-items-center">
    				<!-- Icon -->
    				<i class="bi bi-calendar text-secondary d-block me-2"></i>
    				<!-- Cities -->
    				<div class="form-fs-lg">
    					<input type="text" class="form-control flatpickr" data-date-format="d/M/Y" placeholder="Select Date">
    				</div>
    			</div>
    		</div>

    		<!-- Occupant -->
    		<div class="col-md-6">
    			<label class="small">Occupant</label>
    			<div class="form-border-bottom form-control-transparent d-flex align-items-center">
    				<!-- Icon -->
    				<i class="fa-solid fa-user-group text-secondary d-block me-2"></i>
    				<!-- Cities -->
    				<div class="form-fs-lg">
    					<div class="dropdown guest-selector me-2">
    						<input type="text" class="form-guest-selector form-control selection-result" placeholder="Select occupant" id="dropdownShare" data-bs-auto-close="outside" data-bs-toggle="dropdown">

    						<!-- dropdown items -->
    						<ul class="dropdown-menu guest-selector-dropdown" aria-labelledby="dropdownShare">
    							<!-- Adult -->
    							<li class="d-flex justify-content-between">
    								<div>
    									<h6 class="mb-0">Adults</h6>
    									<small>Ages 13 or above</small>
    								</div>

    								<div class="hstack gap-1 align-items-center">
    									<button type="button" class="btn btn-link adult-remove p-0 mb-0"><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    									<h6 class="guest-selector-count mb-0 adults">2</h6>
    									<button type="button" class="btn btn-link adult-add p-0 mb-0"><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    								</div>
    							</li>

    							<!-- Divider -->
    							<li class="dropdown-divider"></li>

    							<!-- Child -->
    							<li class="d-flex justify-content-between">
    								<div>
    									<h6 class="mb-0">Child</h6>
    									<small>Ages 13 below</small>
    								</div>

    								<div class="hstack gap-1 align-items-center">
    									<button type="button" class="btn btn-link child-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    									<h6 class="guest-selector-count mb-0 child">0</h6>
    									<button type="button" class="btn btn-link child-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    								</div>
    							</li>

    							<!-- Divider -->
    							<li class="dropdown-divider"></li>

    							<!-- Rooms -->
    							<li class="d-flex justify-content-between">
    								<div>
    									<h6 class="mb-0">Rooms</h6>
    									<small>Max room 8</small>
    								</div>

    								<div class="hstack gap-1 align-items-center">
    									<button type="button" class="btn btn-link room-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    									<h6 class="guest-selector-count mb-0 rooms">1</h6>
    									<button type="button" class="btn btn-link room-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    								</div>
    							</li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>

    		<!-- Tour type -->
    		<div class="col-md-6">
    			<label class="small">Tour type</label>
    			<div class="form-border-bottom form-control-transparent d-flex align-items-center">
    				<div class="flex-shrink-0 me-2">
    					<!-- Icon -->
    					<i class="fa-solid fa-torii-gate text-secondary d-block"></i>
    				</div>
    				<!-- Input field -->
    				<div class="flex-grow-1">
    					<!-- Cities -->
    					<div class="form-fs-lg">
    						<select class="form-select js-choice h5" data-search-enabled="true" aria-label=".form-select-sm">
    							<option value="">Select type</option>
    							<option>Adventure</option>
    							<option>Beach</option>
    							<option>Desert</option>
    							<option>History</option>
    						</select>
    					</div>
    				</div>
    			</div>
    		</div>

    		<!-- Button -->
    		<div class="col-12">
    			<button class="btn btn-primary w-100 mb-0">Check Availability</button>
    		</div>
    	</form>
    </div>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Form with advance search

Location
Date
Tour type
Take a Tour
Advance Filters
Enter Tour Name
Price Range
Duration (3D/4N)
Flights
With Flights Without Flights
Star Rating

- 1
- 2
- 3
- 4
- 5

Holiday Type

    <div class="bg-mode shadow p-4 rounded-3">
    	<!-- Main search START -->
    	<form class="form-control-bg-transparent">
    		<div class="row g-4 align-items-center">

    			<div class="col-xl-10">
    				<div class="row g-4">
    					<!-- Location -->
    					<div class="col-md-6 col-lg-4">
    						<label class="h6 fw-normal mb-0"><i class="bi bi-geo-alt text-primary me-1"></i>Location</label>
    						<!-- Input field -->
    						<div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
    							<select class="form-select js-choice" data-search-enabled="true">
    								<option value="">Select location</option>
    								<option>San Jacinto, USA</option>
    								<option selected>North Dakota, Canada</option>
    								<option>West Virginia, Paris</option>
    							</select>
    						</div>
    					</div>

    					<!-- Check in -->
    					<div class="col-md-6 col-lg-4">
    						<label class="h6 fw-normal mb-0"><i class="bi bi-calendar text-primary me-1"></i>Date</label>
    						<!-- Input field -->
    						<div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
    							<input type="text" class="form-control flatpickr" value="20 Nov 2022" placeholder="Choose a date" data-date-format="d M Y">
    						</div>
    					</div>

    					<!-- Guest -->
    					<div class="col-md-6 col-lg-4">
    						<label class="h6 fw-normal mb-0"><i class="fa-solid fa-person-skating text-primary me-1"></i>Tour type</label>
    						<!-- Input field -->
    						<div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
    							<select class="form-select js-choice" data-search-enabled="true">
    								<option value="">Select type</option>
    								<option selected>Adventure</option>
    								<option>Beach</option>
    								<option>Desert</option>
    								<option>History</option>
    							</select>
    						</div>
    					</div>
    				</div>
    			</div>

    			<!-- Button -->
    			<div class="col-xl-2">
    				<div class="d-grid">
    					<a href="#" class="btn btn-lg btn-dark mb-0">Take a Tour</a>
    				</div>
    			</div>
    		</div>
    	</form>
    	<!-- Main search END -->

    	<!-- Collapse button -->
    	<div class="d-grid mt-4">
    		<input type="checkbox" class="btn-check" id="btn-check-soft">
    		<label class="btn btn-primary-soft btn-primary-check mb-0" for="btn-check-soft" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-controls="collapseExample">
    			<i class="bi fa-fe bi-sliders me-2"></i>Advance Filters
    		</label>
    	</div>

    	<!-- Advance filter START -->
    	<div class="collapse" id="collapseExample">
    		<form class="row g-4 mt-3">

    			<!-- Input item -->
    			<div class="col-md-6 col-lg-4">
    				<div class="form-control-borderless">
    					<label class="form-label">Enter Tour Name</label>
    					<input type="text" class="form-control form-control-lg bg-light">
    				</div>
    			</div>

    			<!-- nouislider item -->
    			<div class="col-md-6 col-lg-4">
    				<label class="form-label">Price Range</label>
    				<div class="position-relative">
    					<div class="noui-wrapper">
    						<div class="d-flex justify-content-between">
    							<input type="text" class="text-body input-with-range-min">
    							<input type="text" class="text-body input-with-range-max">
    						</div>
    						<div class="noui-slider-range mt-2" data-range-min='500' data-range-max='2000' data-range-selected-min='700' data-range-selected-max='1500'></div>
    					</div>
    				</div>
    			</div>

    			<!-- Select item -->
    			<div class="col-md-6 col-lg-4">
    				<label class="form-label">Duration (3D/4N)</label>
    				<div class="position-relative">
    					<div class="noui-wrapper">
    						<div class="d-flex justify-content-between">
    							<input type="text" class="text-body input-with-range-min">
    							<input type="text" class="text-body input-with-range-max">
    						</div>
    						<div class="noui-slider-range mt-2" data-range-min='2' data-range-max='7' data-range-selected-min='3' data-range-selected-max='4'></div>
    					</div>
    				</div>
    			</div>

    			<!-- Flights -->
    			<div class="col-md-6 col-lg-4">
    				<label class="form-label">Flights</label>
    				<div>
    					<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    						<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
    						<label class="btn btn-light btn-primary-soft-check mb-0" for="btnradio1">With Flights</label>

    						<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
    						<label class="btn btn-light btn-primary-soft-check mb-0" for="btnradio2">Without Flights</label>
    					</div>
    				</div>
    			</div>

    			<!-- Star rating -->
    			<div class="col-md-6 col-lg-4">
    				<label class="form-label">Star Rating</label>
    				<ul class="list-inline mb-0 g-3">
    					<!-- 1 -->
    					<li class="list-inline-item">
    						<input type="checkbox" class="btn-check" id="btn-check-9">
    						<label class="btn btn-light btn-primary-soft-check" for="btn-check-9">1<i class="bi bi-star-fill"></i></label>
    					</li>
    					<!-- 2 -->
    					<li class="list-inline-item">
    						<input type="checkbox" class="btn-check" id="btn-check-10">
    						<label class="btn btn-light btn-primary-soft-check" for="btn-check-10">2<i class="bi bi-star-fill"></i></label>
    					</li>
    					<!-- 3 -->
    					<li class="list-inline-item">
    						<input type="checkbox" class="btn-check" id="btn-check-11">
    						<label class="btn btn-light btn-primary-soft-check" for="btn-check-11">3<i class="bi bi-star-fill"></i></label>
    					</li>
    					<!-- 4 -->
    					<li class="list-inline-item">
    						<input type="checkbox" class="btn-check" id="btn-check-12">
    						<label class="btn btn-light btn-primary-soft-check" for="btn-check-12">4<i class="bi bi-star-fill"></i></label>
    					</li>
    					<!-- 4 -->
    					<li class="list-inline-item">
    						<input type="checkbox" class="btn-check" id="btn-check-13">
    						<label class="btn btn-light btn-primary-soft-check" for="btn-check-13">5<i class="bi bi-star-fill"></i></label>
    					</li>
    				</ul>
    			</div>

    			<!-- Select item -->
    			<div class="col-md-6 col-lg-4">
    				<div class="form-control-bg-light form-size-lg">
    					<label class="form-label">Holiday Type</label>
    					<select class="form-select js-choice">
    						<option value="">Select Option</option>
    						<option>Most Popular</option>
    						<option>Experiential Stays</option>
    						<option>Featured</option>
    						<option>Group Holiday</option>
    						<option>Experiential</option>
    						<option>Offbeat</option>
    						<option>Indulgence</option>
    						<option>Fully Loaded</option>
    						<option>Kid-friendly</option>
    					</select>
    				</div>
    			</div>
    		</form>
    	</div>
    	<!-- Advance filter END -->
    </div>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/nouislider/nouislider.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>
    <script src="assets/vendor/nouislider/nouislider.min.js"></script>

#### Form with input background light

Pickup
Drop
Pickup Date
Pickup time
Update
Pickup
Drop
Pickup Date
Pickup time
Return Date
Return time
Update

    <div class="form-control-bg-light bg-mode border p-4 rounded-3">
    	<div class="row g-4">

    		<!-- Nav tabs START -->
    		<div class="col-lg-6">
    			<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    				<div class="form-check form-check-inline active" id="cab-one-way-tab" data-bs-toggle="pill" data-bs-target="#cab-one-way" role="tab" aria-controls="cab-one-way" aria-selected="true">
    					<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadiocab1" value="option1" checked>
    					<label class="form-check-label" for="inlineRadiocab1">One Way</label>
    				</div>
    				<div class="form-check form-check-inline" id="cab-round-way-tab" data-bs-toggle="pill" data-bs-target="#cab-round-way" role="tab" aria-controls="cab-round-way" aria-selected="false">
    					<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadiocab2" value="option2">
    					<label class="form-check-label" for="inlineRadiocab2">Round Trip</label>
    				</div>
    			</div>
    		</div>
    		<!-- Nav tabs END -->
    	</div>

    	<!-- Tab content START -->
    	<div class="tab-content mt-0" id="pills-tabContent">
    		<!-- One way tab START -->
    		<div class="tab-pane fade show active" id="cab-one-way" role="tabpanel" aria-labelledby="cab-one-way-tab">
    			<form class="row g-4 align-items-center">
    				<div class="col-xl-10">
    					<div class="row g-4">
    						<!-- Pickup -->
    						<div class="col-md-6 col-xl-4">
    							<div class="form-size-lg">
    								<label class="form-label">Pickup</label>
    								<select class="form-select js-choice" data-search-enabled="true" aria-label=".form-select-sm">
    									<option value="">Select location</option>
    									<option selected>San Jacinto, USA</option>
    									<option>North Dakota, Canada</option>
    									<option>West Virginia, Paris</option>
    								</select>
    							</div>
    						</div>

    						<!-- Drop -->
    						<div class="col-md-6 col-xl-4">
    							<div class="form-size-lg">
    								<label class="form-label">Drop</label>
    								<select class="form-select js-choice" data-search-enabled="true" aria-label=".form-select-sm">
    									<option value="">Select location</option>
    									<option>San Jacinto, USA</option>
    									<option selected>North Dakota, Canada</option>
    									<option>West Virginia, Paris</option>
    								</select>
    							</div>
    						</div>

    						<!-- Date -->
    						<div class="col-md-6 col-xl-2">
    							<label class="form-label">Pickup Date</label>
    							<input type="text" class="form-control form-control-lg flatpickr" value="20 Nov" placeholder="Select date">
    						</div>

    						<!-- Time -->
    						<div class="col-md-6 col-xl-2">
    							<label class="form-label">Pickup time</label>
    							<input type="text" class="form-control form-control-lg flatpickr" value="2:50 PM" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    						</div>
    					</div>
    				</div>

    				<div class="col-xl-2 d-grid mt-xl-auto">
    					<a  class="btn btn-lg btn-primary mb-0" href="#">Update</a>
    				</div>
    			</form>
    		</div>
    		<!-- One way tab END -->

    		<!-- Round way tab END -->
    		<div class="tab-pane fade" id="cab-round-way" role="tabpanel" aria-labelledby="cab-round-way-tab">
    			<form class="row g-4 align-items-center">
    				<div class="col-xl-12">
    					<div class="row g-4">
    						<!-- Leaving From -->
    						<div class="col-md-6 col-xl-6">
    							<div class="form-size-lg">
    								<label class="form-label">Pickup</label>
    								<select class="form-select js-choice" data-search-enabled="true" aria-label=".form-select-sm">
    									<option value="">Select location</option>
    									<option>New York</option>
    									<option>Canada</option>
    									<option>Paris</option>
    								</select>
    							</div>
    						</div>

    						<!-- Going To -->
    						<div class="col-md-6 col-xl-6">
    							<div class="form-size-lg">
    								<label class="form-label">Drop</label>
    								<select class="form-select js-choice" data-search-enabled="true" aria-label=".form-select-sm">
    									<option value="">Select location</option>
    									<option>Canada</option>
    									<option>New York</option>
    									<option>Paris</option>
    								</select>
    							</div>
    						</div>

    						<!-- Date -->
    						<div class="col-md-6 col-xl-3">
    							<label class="form-label">Pickup Date</label>
    							<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select date">
    						</div>

    						<!-- Time -->
    						<div class="col-md-6 col-xl-3">
    							<label class="form-label">Pickup time</label>
    							<input type="text" class="form-control form-control-lg flatpickr" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    						</div>

    						<!-- Date -->
    						<div class="col-md-6 col-xl-3">
    							<label class="form-label">Return Date</label>
    							<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select date">
    						</div>

    						<!-- Time -->
    						<div class="col-md-6 col-xl-3">
    							<label class="form-label">Return time</label>
    							<input type="text" class="form-control form-control-lg flatpickr" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
    						</div>
    					</div>
    				</div>

    				<div class="col-xl-2">
    					<a  class="btn btn-lg btn-primary w-100 mb-0" href="#">Update</a>
    				</div>
    			</form>
    		</div>
    		<!-- Round way tab END -->
    	</div>
    	<!-- Tab content END -->
    </div>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>

#### Form directory

Search

    <div class="bg-blur bg-white bg-opacity-10 border border-light border-opacity-25 rounded-3 p-4">
    	<!-- Form START -->
    	<form class="row g-3 justify-content-center align-items-center">
    		<div class="col-lg-5">
    			<!-- Input -->
    			<div class="form-input-dropdown position-relative">
    				<input class="form-control form-control-lg me-1 ps-5" type="text" data-bs-toggle="dropdown" placeholder="What are you looking for..">
    				<!-- dropdown button -->
    				<ul class="dropdown-menu input-dropdown shadow rounded-0 rounded-bottom w-100">
    					<li><a class="dropdown-item" href="#"><i class="bi bi-building fa-fw text-primary me-2"></i>Hotels</a></li>
    					<li><a class="dropdown-item" href="#"><i class="bi bi-egg-fried fa-fw text-primary me-2"></i>Restaurants</a></li>
    					<li><a class="dropdown-item" href="#"><i class="bi bi-airplane fa-fw text-primary me-2"></i>Flights</a></li>
    					<li><a class="dropdown-item" href="#"><i class="bi bi-cup-straw fa-fw text-primary me-2"></i>Bars</a></li>
    					<li><a class="dropdown-item" href="#"><i class="bi bi-tv fa-fw text-primary me-2"></i>Arts & Entertainment</a></li>
    					<li><a class="dropdown-item" href="#"><i class="bi bi-car-front fa-fw text-primary me-2"></i>Automotive</a></li>
    					<li><a class="dropdown-item" href="#"><i class="bi bi-emoji-kiss fa-fw text-primary me-2"></i>Beauty & Spa</a></li>
    					<li><a class="dropdown-item" href="#"><i class="bi bi-fire fa-fw text-primary me-2"></i>Nightlife</a></li>
    				</ul>
    				<!-- Icon -->
    				<span class="position-absolute top-50 start-0 translate-middle ps-5"><i class="bi bi-search fs-5"></i></span>
    			</div>
    		</div>

    		<div class="col-lg-5">
    			<!-- Choices -->
    			<div class="form-mix-icon-input form-size-lg">
    				<select class="form-select js-choice" data-search-enabled="true">
    					<option value="">Search hotel</option>
    					<option>San Jacinto, USA</option>
    					<option>North Dakota, Canada</option>
    					<option>West Virginia, Paris</option>
    				</select>
    				<!-- Icons -->
    				<span class="position-absolute top-50 start-0 translate-middle ps-5"><i class="bi bi-geo-alt fs-5"></i></span>
    				<a href="#" class="h6 mb-0 position-absolute top-50 end-0 translate-middle pe-1">
    					<i class="fa-solid fa-crosshairs"></i>
    				</a>
    			</div>
    		</div>

    		<div class="col-lg-2 d-grid">
    			<!-- Search -->
    			<a class="btn btn-lg btn-primary mb-0" href="#">Search</a>
    		</div>
    	</form>
    	<!-- Form END -->
    </div>

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/choices/js/choices.min.js"></script>