Listing Search Forms
Booking comes with many Listing search styles. Checkout all search style
Hotel search form
Check Availability
<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
<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
<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
<!-- 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
<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
<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
<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
<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
<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>