1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<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">
<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>
<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 & Orange County</option>
<option value="7">Santa Barbara & 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>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
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;
}
