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 start
2. 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 again
3. 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="container padding-bottom-3x mb-2">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<h2>Forgot your password?</h2>
<p>Change your password in three easy steps. This helps to keep your new password secure.</p>
<ol class="list-unstyled">
<li><span class="text-primary text-medium">1. </span>Fill in your email address below.</li>
<li><span class="text-primary text-medium">2. </span>We'll email you a temporary code.</li>
<li><span class="text-primary text-medium">3. </span>Use the code to change your password on our secure website.</li>
</ol>
<form class="card mt-4">
<div class="card-body">
<div class="form-group">
<label for="email-for-pass">Enter your email address</label>
<input class="form-control" type="text" id="email-for-pass" required=""/><small class="form-text text-muted">Type in the email address you used when you registered. Then we'll email a code to this address.</small>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary" type="submit">Get New Password</button>
</div>
</form>
</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{margin-top:20px;}
.form-control:not(textarea) {
height: 44px;
}
.form-control {
padding: 0 18px 3px;
border: 1px solid #dbe2e8;
border-radius: 22px;
background-color: #fff;
color: #606975;
font-family: "Maven Pro",Helvetica,Arial,sans-serif;
font-size: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-group label {
margin-bottom: 8px;
padding-left: 18px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.form-text {
padding-left: 18px;
}
.text-muted {
color: #9da9b9 !important;
}