<body>
<div class="container">
<h1 class="text-center mb-5">Modern Bootstrap Search Forms</h1>
<!-- Form 1: Simple Elegant Search -->
<div class="form-container">
<span class="form-badge bg-primary bg-opacity-10 text-primary">Simple & Elegant</span>
<h2 class="mb-4">Basic Search</h2>
<form>
<div class="input-group mb-3 shadow-sm rounded-pill overflow-hidden">
<input type="text" class="form-control border-0 py-3 px-4" placeholder="Search anything..." aria-label="Search term">
<button class="btn btn-primary px-4 search-btn" type="button">
<i class="bi bi-search animated-icon"></i>
</button>
</div>
</form>
</div>
<!-- Form 2: Advanced Product Search -->
<div class="form-container">
<span class="form-badge bg-success bg-opacity-10 text-success">E-commerce</span>
<h2 class="mb-4">Product Search</h2>
<form>
<div class="row g-3">
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="productName" placeholder="Product name">
<label for="productName"><i class="bi bi-box me-2"></i>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<select class="form-select" id="category">
<option selected disabled value="">Select a category</option>
<option>Electronics</option>
<option>Clothing</option>
<option>Home & Garden</option>
<option>Books</option>
</select>
<label for="category"><i class="bi bi-tag me-2"></i>Category</label>
</div>
</div>
</div>
<div class="row g-3">
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="number" class="form-control" id="minPrice" placeholder="Min price">
<label for="minPrice"><i class="bi bi-currency-dollar me-2"></i>Min Price</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="number" class="form-control" id="maxPrice" placeholder="Max price">
<label for="maxPrice"><i class="bi bi-currency-dollar me-2"></i>Max Price</label>
</div>
</div>
</div>
<div class="mb-4">
<p class="search-label"><i class="bi bi-star-fill me-2 text-warning"></i>Rating</p>
<div class="d-flex gap-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="rating5">
<label class="form-check-label" for="rating5">5★</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="rating4">
<label class="form-check-label" for="rating4">4★+</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="rating3">
<label class="form-check-label" for="rating3">3★+</label>
</div>
</div>
</div>
<button class="btn btn-success px-4 py-2 w-100 search-btn" type="button">
<i class="bi bi-search me-2 animated-icon"></i> Search Products
</button>
</form>
</div>
<!-- Form 3: Travel Search -->
<div class="form-container">
<span class="form-badge bg-info bg-opacity-10 text-info">Travel</span>
<h2 class="mb-4">Travel Search</h2>
<form>
<div class="mb-4">
<p class="search-label mb-3"><i class="bi bi-airplane me-2"></i>Trip Type</p>
<div class="d-flex gap-3 flex-wrap">
<div class="form-check">
<input class="form-check-input" type="radio" name="tripType" id="roundTrip" checked>
<label class="form-check-label" for="roundTrip">Round Trip</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="tripType" id="oneWay">
<label class="form-check-label" for="oneWay">One Way</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="tripType" id="multiCity">
<label class="form-check-label" for="multiCity">Multi-City</label>
</div>
</div>
</div>
<div class="row g-3">
<div class="col-md-6">
<div class="floating-container">
<div class="form-floating">
<input type="text" class="form-control border-0" id="departure" placeholder="From">
<label for="departure"><i class="bi bi-geo-alt me-2"></i>From</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="floating-container">
<div class="form-floating">
<input type="text" class="form-control border-0" id="destination" placeholder="To">
<label for="destination"><i class="bi bi-geo-alt-fill me-2"></i>To</label>
</div>
</div>
</div>
</div>
<div class="row g-3 mt-2">
<div class="col-md-6">
<div class="floating-container">
<div class="form-floating">
<input type="date" class="form-control border-0" id="departDate">
<label for="departDate"><i class="bi bi-calendar-event me-2"></i>Depart</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="floating-container">
<div class="form-floating">
<input type="date" class="form-control border-0" id="returnDate">
<label for="returnDate"><i class="bi bi-calendar-event-fill me-2"></i>Return</label>
</div>
</div>
</div>
</div>
<div class="row g-3 mt-2">
<div class="col-md-6">
<div class="floating-container">
<div class="form-floating">
<select class="form-select border-0" id="passengers">
<option value="1">1 Passenger</option>
<option value="2">2 Passengers</option>
<option value="3">3 Passengers</option>
<option value="4">4+ Passengers</option>
</select>
<label for="passengers"><i class="bi bi-person me-2"></i>Passengers</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="floating-container">
<div class="form-floating">
<select class="form-select border-0" id="class">
<option value="economy">Economy</option>
<option value="premium">Premium Economy</option>
<option value="business">Business</option>
<option value="first">First Class</option>
</select>
<label for="class"><i class="bi bi-star me-2"></i>Class</label>
</div>
</div>
</div>
</div>
<div class="mt-4">
<button class="btn btn-info text-white w-100 py-3 search-btn" type="button">
<i class="bi bi-search me-2 animated-icon"></i> Find Flights
</button>
</div>
</form>
</div>
<!-- Form 4: Real Estate Search -->
<div class="form-container">
<span class="form-badge bg-danger bg-opacity-10 text-danger">Real Estate</span>
<h2 class="mb-4">Property Search</h2>
<form>
<div class="input-group mb-4 shadow-sm rounded-pill overflow-hidden">
<span class="input-group-text border-0 bg-white ps-4"><i class="bi bi-geo-alt text-danger"></i></span>
<input type="text" class="form-control border-0 py-3" placeholder="Enter location, address, or zip code..." aria-label="Location">
</div>
<div class="mb-4">
<p class="search-label"><i class="bi bi-house-door me-2"></i>Property Type</p>
<div class="d-flex gap-2 flex-wrap">
<span class="badge bg-white text-dark border p-2 px-3 filter-badge">
<i class="bi bi-house"></i> Houses
</span>
<span class="badge bg-white text-dark border p-2 px-3 filter-badge">
<i class="bi bi-building"></i> Apartments
</span>
<span class="badge bg-white text-dark border p-2 px-3 filter-badge">
<i class="bi bi-house-door"></i> Condos
</span>
<span class="badge bg-white text-dark border p-2 px-3 filter-badge">
<i class="bi bi-shop"></i> Commercial
</span>
</div>
</div>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label search-label"><i class="bi bi-currency-dollar me-2"></i>Price Range</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="number" class="form-control" placeholder="Min" aria-label="Min price">
<span class="input-group-text">-</span>
<input type="number" class="form-control" placeholder="Max" aria-label="Max price">
</div>
</div>
<div class="col-md-6">
<label class="form-label search-label"><i class="bi bi-rulers me-2"></i>Square Feet</label>
<div class="input-group">
<input type="number" class="form-control" placeholder="Min" aria-label="Min sqft">
<span class="input-group-text">-</span>
<input type="number" class="form-control" placeholder="Max" aria-label="Max sqft">
<span class="input-group-text">ft²</span>
</div>
</div>
</div>
<div class="row g-3 mb-4">
<div class="col-md-4">
<label class="form-label search-label"><i class="bi bi-door-open me-2"></i>Bedrooms</label>
<select class="form-select">
<option selected value="">Any</option>
<option>1+</option>
<option>2+</option>
<option>3+</option>
<option>4+</option>
<option>5+</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label search-label"><i class="bi bi-droplet me-2"></i>Bathrooms</label>
<select class="form-select">
<option selected value="">Any</option>
<option>1+</option>
<option>2+</option>
<option>3+</option>
<option>4+</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label search-label"><i class="bi bi-calendar-event me-2"></i>Year Built</label>
<select class="form-select">
<option selected value="">Any</option>
<option>2020+</option>
<option>2010+</option>
<option>2000+</option>
<option>1990+</option>
<option>Before 1990</option>
</select>
</div>
</div>
<div class="mb-4">
<p class="search-label"><i class="bi bi-check-circle me-2"></i>Features</p>
<div class="row">
<div class="col-md-4">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="garage">
<label class="form-check-label" for="garage">Garage</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="pool">
<label class="form-check-label" for="pool">Pool</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="fireplace">
<label class="form-check-label" for="fireplace">Fireplace</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="aircon">
<label class="form-check-label" for="aircon">Air Conditioning</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="balcony">
<label class="form-check-label" for="balcony">Balcony</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="pets">
<label class="form-check-label" for="pets">Pet Friendly</label>
</div>
</div>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-outline-secondary flex-grow-1 py-2" type="button">
<i class="bi bi-arrow-clockwise me-2"></i> Reset
</button>
<button class="btn btn-danger flex-grow-1 py-2 search-btn" type="button">
<i class="bi bi-search me-2 animated-icon"></i> Search Properties
</button>
</div>
</form>
</div>
<!-- Form 5: Job Search -->
<div class="form-container">
<span class="form-badge bg-primary bg-opacity-10 text-primary">Jobs</span>
<h2 class="mb-4">Job Search</h2>
<form>
<div class="row g-3 mb-4">
<div class="col-md-6">
<input type="text" class="form-control custom-input" placeholder="Job title, keywords, or company" aria-label="Keywords">
</div>
<div class="col-md-6">
<input type="text" class="form-control custom-input" placeholder="City, state, or zip code" aria-label="Location">
</div>
</div>
<div class="mb-4">
<p class="search-label"><i class="bi bi-briefcase me-2"></i>Job Type</p>
<div class="d-flex gap-2 flex-wrap">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="fullTime">
<label class="form-check-label" for="fullTime">Full-time</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="partTime">
<label class="form-check-label" for="partTime">Part-time</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="contract">
<label class="form-check-label" for="contract">Contract</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="intern">
<label class="form-check-label" for="intern">Internship</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="remote">
<label class="form-check-label" for="remote">Remote</label>
</div>
</div>
</div>
<div class="mb-4">
<p class="search-label"><i class="bi bi-cash-stack me-2"></i>Salary Range</p>
<select class="form-select">
<option selected value="">Any</option>
<option>$30,000+</option>
<option>$50,000+</option>
<option>$70,000+</option>
<option>$100,000+</option>
<option>$150,000+</option>
</select>
</div>
<div class="mb-4">
<p class="search-label"><i class="bi bi-calendar3 me-2"></i>Date Posted</p>
<div class="d-flex gap-2 flex-wrap">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="datePosted" id="anyTime" checked>
<label class="form-check-label" for="anyTime">Any time</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="datePosted" id="today">
<label class="form-check-label" for="today">Today</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="datePosted" id="week">
<label class="form-check-label" for="week">Past week</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="datePosted" id="month">
<label class="form-check-label" for="month">Past month</label>
</div>
</div>
</div>
<button class="btn btn-primary w-100 py-3 search-btn" type="button">
<i class="bi bi-search me-2 animated-icon"></i> Find Jobs
</button>
</form>
</div>
</div>
</body>
body {
background-color: #f8f9fa;
padding: 2rem 0;
}
.form-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
background: white;
margin-bottom: 2rem;
}
.search-label {
color: #6c757d;
font-weight: 500;
margin-bottom: 1rem;
}
.form-floating label {
color: #6c757d;
}
.search-btn {
transition: all 0.3s;
}
.search-btn:hover {
transform: translateY(-2px);
}
.form-badge {
display: inline-block;
padding: 0.5rem 1rem;
margin-bottom: 1.5rem;
border-radius: 30px;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.animated-icon {
transition: all 0.3s;
}
.search-btn:hover .animated-icon {
transform: scale(1.2);
}
.filter-badge {
cursor: pointer;
transition: all 0.3s;
}
.filter-badge:hover {
transform: translateY(-2px);
}
.custom-input {
border-radius: 30px;
padding: 1rem 1.5rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.floating-container {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
