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 h-100">
<div class="row h-100">
<div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
<div class="d-table-cell align-middle">
<div class="text-center mt-4">
<h1 class="h2">Welcome back, Dey</h1>
<p class="lead">
Sign in to your account to continue
</p>
</div>
<div class="card">
<div class="card-body">
<div class="m-sm-4">
<div class="text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Andrew Jones" class="img-fluid rounded-circle" width="132" height="132"/>
</div>
<form>
<div class="form-group">
<label>Email</label>
<input class="form-control form-control-lg" type="email" name="email" placeholder="Enter your email"/>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control form-control-lg" type="password" name="password" placeholder="Enter your password"/>
<small>
<a href="pages-reset-password.html">Forgot password?</a>
</small>
</div>
<div>
<div class="custom-control custom-checkbox align-items-center">
<input type="checkbox" class="custom-control-input" value="remember-me" name="remember-me" checked=""/>
<label class="custom-control-label text-small">Remember me next time</label>
</div>
</div>
<div class="text-center mt-3">
<a href="index.html" class="btn btn-lg btn-primary">Sign in</a>
</div>
</form>
</div>
</div>
</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{
background-color: #DCDCDC;
margin-top:20px;
}
.card {
margin-bottom: 1.5rem;
box-shadow: 0 1px 15px 1px rgba(52,40,104,.08);
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #e5e9f2;
border-radius: .2rem;
}