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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-primary" id="locked-screen">
<div class="panel-heading">
<h3 class="panel-title">
Anderson corbrick
</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="profile-pic text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle img-thumbnail img-user"/>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="password" class="form-control" id="password" placeholder="Password"/>
<i class="fa fa-lock"></i>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<a href="#/" class="btn btn-primary btn-block">Unlock</a>
</div>
</div>
</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 {
color: #565656;
background: #ddd;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
min-height: 100%;
position: relative;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
#locked-screen{
margin-top:80px;
}
.img-user{
margin:auto;
}
.panel-primary > .panel-heading {
color: #fff;
background-color: #39bbdb;
border-color: #556b8d;
}
.panel > .panel-heading {
font-weight: 400;
text-transform: uppercase;
padding: 14px 10px;
}
.panel {
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
.panel-heading > .panel-title {
height: auto;
font-size: 0.813em;
}
.profile-pic {
margin: 15px 0;
}
.profile-pic img {
border: 7px solid #e5e6ea;
}
.btn-primary, a.btn-primary:link, a.btn-primary:visited {
color: #fff;
background-color: #39bbdb;
border-radius:0px;
}
#password {
padding-left: 32px;
}
.form-control {
border: 2px solid #e8ebed;
border-radius: 2px;
box-shadow: none;
height: 37px;
padding: 8px 12px 9px 12px;
}
.form-group i {
position: absolute;
left: 27px;
top: 11px;
}