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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous"/>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-5">
<div class="card cardbox">
<div class="card-header">Register</div>
<div class="card-body">
<div class="social-buttons">
<a href="#/" class="btn btn-md btn-block btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
<a href="#/" class="btn btn-md btn-block btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
</div>
<div class="login-or">
<hr class="hr-or"/>
<span class="span-or">or</span>
</div>
<div class="form-group">
<form id="login-nav" method="post" role="form" class="form" accept-charset="UTF-8">
<div class="form-group">
<label class="sr-only">Username</label>
<input type="text" id="reg_username" name="user_name" class="form-control"
value="" placeholder="Username" required/>
</div>
<div class="form-group">
<label class="sr-only">Password</label>
<div class="input-group">
<input type="password" id="reg_userpassword" name="user_password" class="form-control" data-placement="bottom" data-toggle="popover" data-container="body"
data-html="true" value="" placeholder="Password" required/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-append1" onclick="togglePassword()">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="progress mt-1" id="reg-password-strength">
<div id="password-strength" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style={{/*width:0%*/}}>
</div>
</div>
<div class="help-block text-right">
<small><a href="#/">Forgot Password</a></small>
<span id="reg-password-quality" class="hide pull-left block-help">
<small>Password <span id="reg-password-quality-result"></span></small>
</span>
</div>
<div id="reg_passwordrules" class="hide password-rule mt-2"><small>
<ul class="list-unstyled">
<li class="">
<span class="eight-character"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
min 8 character</li>
<li class="">
<span class="low-upper-case"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
min 1 uppercase & 1 lowercase character</li>
<li class="">
<span class="one-number"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
min 1 number</li>
<li class="">
<span class="one-special-char"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
min 1 special char (!@#$%^&*)</li>
</ul>
</small></div>
</div>
<div class="form-group">
<label class="sr-only">Password Confirm</label>
<div class="input-group">
<input type="password" id="reg_userpasswordconfirm" class="form-control" data-placement="bottom"
data-toggle="popover" data-container="body" data-html="true" placeholder="Password Confirm" required/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-append2" onclick="togglePassword()">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="help-block text-right">
<small><span id="error-confirmpassword" class="hide pull-right block-help">
<i class="fa fa-info-circle text-danger" aria-hidden="true"></i>Don't match password'</span></small>
</div>
</div>
<div class="form-group">
<label class="sr-only">E-mail Address</label>
<input type="email" id="reg_useremail" name="user_email" class="form-control"
value="" placeholder="[email protected]"/>
</div>
<div class="form-group">
<label class="sr-only">Questions</label>
<select id="reg_userquestion" class="form-control" name="user_question">
<option selected> Select Questions </option>
<option>What's favorite color?</option>
</select>
</div>
<div class="form-group">
<label class="sr-only">Answer</label>
<input type="text" id="reg_useranswer" name="user_answer" class="form-control"
value="" placeholder="Are you Answers"/>
</div>
<div class="form-group">
<button id="reg_submit" name="submit" value="1" class="btn btn-block btn-primary" disabled="disabled">Create user</button>
<div id="sign-up-popover" class="hide"><p>is empty</p></div>
</div>
<div class="form-check">
<input type="checkbox" id="reg_remember" name="user_remember" class="form-check-input" value="1"/>
<label class="form-check-label">Remember me</label>
</div>
</form>
</div>
<div class="login-or"><hr class="hr-or"/></div>
<div class="bottom text-center">
Are you user? <a href="#/"><b>Login</b></a>
</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 :
.row{
margin-top: 50px;
margin-bottom: 50px;
}
.masthead-text{
height: 300px;
}
.form-control{
height: 45px;
}
select:hover {
color: #444645;
background: #ddd;
}
.login-or {
position: relative;
font-size: 18px;
color: #aaa;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
@media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
.progress {
height: 5px;
}
.block-help {
font-weight: 300;
}
.hide {
display: none;
}
