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 bootstrap snippets bootdey">
<div class="row">
<div class="col-sm-8 col-md-5 col-md-offset-4">
<div class="panel panel-success panel-circle">
<div class="panel-body">
<form role="form" action="#" method="POST">
<fieldset>
<div class="row text-center">
<p class="bg-success title">Daniel snathanson</p>
<br/>
</div>
<div class="row">
<div class="center-block">
<img class="profile-img img-thumbnail" src="https://bootdey.com/img/Content/User_for_snippets.png" alt=""/>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group text-center">
<small>
Lorem Ipsum is simply dummy text of the printing and typesetting industry printing.
Donec non dignissim eros
</small>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input class="form-control" placeholder="Password" name="password" type="password" value="" autofocus/>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-success btn-block">
<i class="glyphicon glyphicon-share-alt"></i>
Continue
</button>
</div>
</div>
</div>
</fieldset>
</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 :
.title{
width:80%;
font-size:18px;
margin:auto;
}
.panel-circle{
-moz-border-radius: 20%;
-webkit-border-radius: 20%;
border-radius: 20%;
box-shadow: 5px 5px 0 rgba(0,0,0,0.08);
}
.panel-heading {
padding: 5px 15px;
}
.panel-footer {
padding: 1px 15px;
color: #A0A0A0;
}
.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}