Bootstrap html snippet. real estate search header

HTML code

Clean, semantic HTML that powers this Bootstrap 5.2.0 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<div class="section bg-theme-color-light overlay-dark overlay-opacity-8 bg-cover lazy" data-loaded="true" style="background-image: url(https://bootdey.com/img/Content/bg1.jpg);">
    			
				<div class="container"> 

					<div class="row text-center-md text-center-xs d-middle justify-content-start">
						
						<div class="col-12 col-lg-6 mb-5 text-white aos-init aos-animate" data-aos="fade-in" data-aos-delay="0" data-aos-offset="0">

							<!-- main title -->
							<h1 class="display-4 fw-bold mb-0">
								<span class="d-inline-block">

									<span class="h6 fw-normal d-block text-align-end text-center-xs">
										Over 28.988 Properties
									</span>

									<span class="text-danger">Bootdey</span> Real Estate
								</span>
							</h1>
							
							<!-- slogan -->
							<p class="h3 fw-normal mb-0">
								Your home, one click away
							</p>

						</div>

						<div class="col-12 col-lg-6 text-align-end text-center-md text-center-xs aos-init aos-animate" data-aos="fade-in" data-aos-delay="50" data-aos-offset="0">

							<div class="d-inline-block bg-white shadow-primary-xs rounded p-4 p-md-5 w-100 max-w-450 text-align-start">
								
								<h2 class="h5 mb-5">
									<i class="fi fi-homeadvisor"></i> 
									<span class="d-inline-block px-2">Propery Search</span>
								</h2>

								<form novalidate="" class="bs-validate" method="get" action="#">

									<div class="clearfix mb-3">
										<label class="form-radio form-radio-secondary">
											<input type="radio" name="s_type" value="1" checked="">
											<i></i> Buy
										</label>

										<label class="form-radio form-radio-secondary ml-3">
											<input type="radio" name="s_type" value="2">
											<i></i> Rent
										</label>
									</div>

									<div class="form-floating mb-3">
										<select required="" id="s_location" class="form-control" data-live-search="true" title="No City Selected">
											<option value="">No City Selected</option>
											<option value="1">New York City</option>
											<option value="2">Washington, DC Area</option>
											<option value="3">Miami</option>
											<option value="4">Greater Boston</option>
											<option value="5">The Hamptons</option>
											<option value="6">Los Angeles &amp; Orange County</option>
											<option value="7">Santa Barbara &amp; Montecito</option>
											<option value="8">Aspen</option>
											<option value="9">San Francisco Bay Area</option>
										</select>
										<label for="s_location">Select a City</label>
									</div>

									<div class="form-floating mb-3">
										<select id="s_rooms" class="form-control" title="No. of Rooms">
											<option value="1">Studio</option>
											<option value="2">2 Rooms</option>
											<option value="3">3 Rooms</option>
											<option value="4">4 Rooms</option>
											<option value="5">5+ Rooms</option>
										</select>
										<label for="s_rooms">No. of Rooms</label>
									</div>

									<div class="row gutters-xs">

										<div class="col-12 col-lg-6">

											<div class="form-floating mb-3">
												<select id="s_baths" class="form-control" title="Bathrooms">
													<option value="0" selected="">Any</option>
													<option value="2">2 Baths</option>
													<option value="3">3 Baths</option>
													<option value="4">4 Baths</option>
													<option value="5">5 Baths</option>
												</select>
												<label for="s_baths">Bathrooms</label>
											</div>

										</div>

										<div class="col-12 col-lg-6">

											<div class="form-floating mb-3">
												<input placeholder="Max. Price" id="s_max_price" type="number" value="" class="form-control">
												<label for="s_max_price">Max. Price</label>
											</div>

										</div>

									</div>

									<div class="form-floating mb-3">
										<input placeholder="Address or Zipcode" id="s_address" type="text" value="" class="form-control">
										<label for="s_address">Address or Zipcode</label>
									</div>


									<button type="submit" class="btn w-100 btn-lg btn-danger bg-gradient-danger">
										<i class="fi fi-search"></i>
										Search
									</button>
								</form>

							</div>

						</div>

					</div>

				</div>

			</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 5.2.0 to keep the design, spacing, and responsiveness consistent.

body{padding-top:20px;}


@media only screen and (min-width: 768px){
body:not(.layout-admin) .section, body:not(.layout-admin) section {
    padding: 100px 0;
}
}

.d-middle {
    align-items: center;
    display: flex;
    justify-content: center;
}

.opacity-8,.overlay-opacity-8:after {
    opacity: .8
}

opacity-8, .overlay-opacity-8:after {
    opacity: .8;
}
.overlay-dark-hover:hover:after, .overlay-dark:after {
    background: #131f43;
}
.overlay-dark-hover:after, .overlay-dark:after, .overlay-light-hover:after, .overlay-light:after {
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0;
}

.bg-theme-color-light {
    background-color: rgba(87,79,236,.04)!important;
}
.bg-cover {
    background-position: 50%!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}
.overlay-dark, .overlay-dark-hover, .overlay-light, .overlay-light-hover {
    position: relative;
}
#overlay-default, .overlay-dark, .overlay-dark-hover:after, .overlay-default, .overlay-light, .overlay-light-hover:after {
    transition: all .2s ease;
}
.section, section {
    position: relative;
    word-break: break-word;
}

.overlay-dark>*, .overlay-light>* {
    position: relative;
    z-index: 1;
}