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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="page-profile">
<div class="row">
<div class="col-md-3">
<section class="panel">
<div class="panel-body noradius padding-10">
<figure class="margin-bottom-10">
<img class="img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""/>
</figure>
<h6 class="progress-head">Profile Completion <span class="pull-right">60%</span></h6>
<div class="progress progress-xs">
<div class="progress-bar" role="progressbar" style={{/*width: 60%;*/}}></div>
</div>
<ul class="list-unstyled size-13">
<li class="text-gray"><i class="fa fa-check"></i> Update Your Birthday</li>
<li class="text-gray"><i class="fa fa-check"></i> Update Profile Picture</li>
<li>Confirm Your Account</li>
<li>Update Your Address</li>
</ul>
<hr class="half-margins"/>
<h3 class="text-black">
Melisa Doe
<small class="text-gray size-14"> / CEO</small>
</h3>
<p class="size-12">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet dolore magna aliquam tincidunt erat volutpat.</p>
<hr class="half-margins"/>
<h6>Follow Me</h6>
<a href="#/" class="btn ico-only btn-facebook btn-xs" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="#/" class="btn ico-only btn-twitter btn-xs" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="#/" class="btn ico-only btn-google-plus btn-xs" title="Google plus"><i class="fa fa-google-plus"></i></a>
<a href="#/" class="btn ico-only btn-linkedin btn-xs" title="Linked In"><i class="fa fa-linkedin"></i></a>
<a href="#/" class="btn ico-only btn-pinterest btn-xs" title="Pinterest"><i class="fa fa-pinterest"></i></a>
<a href="#/" class="btn ico-only btn-flickr btn-xs" title="Flickr"><i class="fa fa-flickr"></i></a>
<a href="#/" class="btn ico-only btn-tumblr btn-xs" title="Tumblr"><i class="fa fa-tumblr"></i></a>
<a href="#/" class="btn ico-only btn-skype btn-xs" title="Skype"><i class="fa fa-skype"></i></a>
<a href="#/" class="btn ico-only btn-stackoverflow btn-xs" title="Stack Overflow"><i class="fa fa-stack-overflow"></i></a>
<a href="#/" class="btn ico-only btn-instagram btn-xs" title="Instagram"><i class="fa fa-instagram"></i></a>
<a href="#/" class="btn ico-only btn-dribbble btn-xs" title="Dribble"><i class="fa fa-dribbble"></i></a>
<a href="#/" class="btn ico-only btn-youtube btn-xs" title="Youtube"><i class="fa fa-youtube"></i></a>
<a href="#/" class="btn ico-only btn-vimeo btn-xs" title="Vimeo"><i class="fa fa-vimeo-square"></i></a>
<a href="#/" class="btn ico-only btn-rss btn-xs" title="Rss"><i class="fa fa-rss"></i></a>
</div>
</section>
</div>
<div class="col-md-5">
<div class="tabs white nomargin-top">
<ul class="nav nav-tabs tabs-primary">
<li class="active">
<a href="#overview" data-toggle="tab">Overview</a>
</li>
<li>
<a href="#edit" data-toggle="tab">Edit</a>
</li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane active">
<form class="well">
<textarea rows="2" class="form-control" placeholder="What's on your mind?"></textarea>
<div class="margin-top-10">
<button type="submit" class="btn btn-sm btn-primary pull-right">Post</button>
<a href="#/" class="btn btn-link profile-btn-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add a Location"><i class="fa fa-map-marker"></i></a>
<a href="#/" class="btn btn-link profile-btn-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add Photo"><i class="fa fa-camera"></i></a>
<a href="#/" class="btn btn-link profile-btn-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add File"><i class="fa fa-file"></i></a>
</div>
</form>
<hr class="invisible half-margins"/>
<ul class="comment list-unstyled padding-10">
<li class="comment">
<img class="avatar" src="https://bootdey.com/img/Content/avatar/avatar1.png" width="50" height="50" alt="avatar"/>
<div class="comment-body">
<a href="#/" class="comment-author">
<small class="text-muted pull-right"> 12 Minutes ago </small>
<span>Melisa Doe</span>
</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet
dolore magna aliquam tincidunt erat volutpat.
</p>
</div>
<ul class="list-inline size-11 margin-top-10">
<li>
<a href="#/" class="text-info"><i class="fa fa-reply"></i> Reply</a>
</li>
<li>
<a href="#/" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
</li>
<li>
<a href="#/" class="text-muted">Show All Comments (36)</a>
</li>
<li class="pull-right">
<a href="#/" class="text-danger">Delete</a>
</li>
<li class="pull-right">
<a href="#/" class="text-primary">Edit</a>
</li>
</ul>
</li>
<li class="comment comment-reply">
<img class="avatar" src="https://bootdey.com/img/Content/avatar/avatar2.png" width="35" height="35" alt="avatar"/>
<div class="comment-body">
<a href="#/" class="comment-author">
<small class="text-muted pull-right"> 4 Minutes ago </small>
<span>Ioana Doe</span>
</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
</p>
</div>
<ul class="list-inline size-11">
<li>
<a href="#/" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
</li>
<li class="pull-right">
<a href="#/" class="text-danger">Delete</a>
</li>
<li class="pull-right">
<a href="#/" class="text-primary">Edit</a>
</li>
</ul>
</li>
<li class="comment comment-reply">
<img class="avatar" src="https://bootdey.com/img/Content/avatar/avatar3.png" width="35" height="35" alt="avatar"/>
<div class="comment-body">
<a href="#/" class="comment-author">
<small class="text-muted pull-right"> a moment ago </small>
<span>Simona Doe</span>
</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
</p>
</div>
<ul class="list-inline size-11">
<li>
<a href="#/" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
</li>
<li class="pull-right">
<a href="#/" class="text-danger">Delete</a>
</li>
<li class="pull-right">
<a href="#/" class="text-primary">Edit</a>
</li>
</ul>
</li>
</ul>
<ul class="comment list-unstyled padding-10">
<li class="comment">
<img class="avatar" src="https://bootdey.com/img/Content/avatar/avatar4.png" width="50" height="50" alt="avatar"/>
<div class="comment-body">
<a href="#/" class="comment-author">
<small class="text-muted pull-right"> 12 Minutes ago </small>
<span>Melisa Doe</span>
</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet
dolore magna aliquam tincidunt erat volutpat.
</p>
</div>
<ul class="list-inline size-11 margin-top-10">
<li>
<a href="#/" class="text-info"><i class="fa fa-reply"></i> Reply</a>
</li>
<li>
<a href="#/" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
</li>
<li class="pull-right">
<a href="#/" class="text-danger">Delete</a>
</li>
<li class="pull-right">
<a href="#/" class="text-primary">Edit</a>
</li>
</ul>
</li>
<li class="comment comment-reply">
<img class="avatar" src="https://bootdey.com/img/Content/avatar/avatar5.png" width="35" height="35" alt="avatar"/>
<div class="comment-body">
<a href="#/" class="comment-author">
<small class="text-muted pull-right"> 4 Minutes ago </small>
<span>Ioana Doe</span>
</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
</p>
</div>
<ul class="list-inline size-11">
<li>
<a href="#/" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
</li>
<li class="pull-right">
<a href="#/" class="text-danger">Delete</a>
</li>
<li class="pull-right">
<a href="#/" class="text-primary">Edit</a>
</li>
</ul>
</li>
<li class="comment comment-reply">
<img class="avatar" src="https://bootdey.com/img/Content/avatar/avatar6.png" width="35" height="35" alt="avatar"/>
<div class="comment-body">
<a href="#/" class="comment-author">
<small class="text-muted pull-right"> a moment ago </small>
<span>Simona Doe</span>
</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy! <i class="fa fa-smile-o green"></i>
</p>
</div>
<ul class="list-inline size-11">
<li>
<a href="#/" class="text-success"><i class="fa fa-thumbs-up"></i> Like</a>
</li>
<li class="pull-right">
<a href="#/" class="text-danger">Delete</a>
</li>
<li class="pull-right">
<a href="#/" class="text-primary">Edit</a>
</li>
</ul>
</li>
<li>
<div class="input-group">
<input id="btn-input" type="text" class="form-control" placeholder="Type your message..."/>
<span class="input-group-btn">
<button class="btn btn-primary" id="btn-chat">
<i class="fa fa-reply"></i> Reply
</button>
</span>
</div>
</li>
</ul>
</div>
<div id="edit" class="tab-pane">
<form class="form-horizontal padding-10" method="get">
<h4>Personal Information</h4>
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="profileFirstName">First Name</label>
<div class="col-md-8">
<input type="text" class="form-control" id="profileFirstName"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="profileLastName">Last Name</label>
<div class="col-md-8">
<input type="text" class="form-control" id="profileLastName"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="profileAddress">Address</label>
<div class="col-md-8">
<input type="text" class="form-control" id="profileAddress"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="profileCompany">Company</label>
<div class="col-md-8">
<input type="text" class="form-control" id="profileCompany"/>
</div>
</div>
</fieldset>
<hr/>
<h4>About</h4>
<fieldset>
<div class="form-group">
<label class="col-xs-3 control-label">Public Profile</label>
<div class="col-md-8">
<label class="checkbox">
<input type="checkbox" value="1" checked="checked" id="profilePublic"/>
<i></i> Checkbox 1
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="profileBio">Biographical Info</label>
<div class="col-md-8">
<textarea class="form-control" rows="3" id="profileBio"></textarea>
</div>
</div>
<div class="form-group">
<div class="sky-form">
<label class="col-xs-3 control-label">Profile Image</label>
<div class="col-md-8">
<label for="file" class="input input-file">
<div class="button">
<input type="file" id="file" onchange="this.parentNode.nextSibling.value = this.value"/>Browse
</div>
<input type="text" readonly=""/>
</label>
<a href="#/" class="btn btn-danger btn-xs nomargin"><i class="fa fa-times"></i> Remove Current Image</a>
</div>
</div>
</div>
</fieldset>
<hr/>
<h4>Change Password</h4>
<fieldset class="mb-xl">
<div class="form-group">
<label class="col-md-3 control-label" for="profileNewPassword">New Password</label>
<div class="col-md-8">
<input type="text" class="form-control" id="profileNewPassword"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="profileNewPasswordRepeat">Repeat New Password</label>
<div class="col-md-8">
<input type="text" class="form-control" id="profileNewPasswordRepeat"/>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title elipsis">
<i class="fa fa-rss"></i> Projects
</h2>
</header>
<div class="panel-body noradius padding-10">
<ul class="bullet-list list-unstyled">
<li class="red">
<h3>Epona HTML5 Template</h3>
<span class="text-gray size-12">Lorem ipsum dolor sit amet, consectetuer adipiscing </span>
</li>
<li class="green">
<h3>Atropos Template</h3>
<span class="text-gray size-12">Lorem ipsum dolor sit amet, consectetuer adipiscing </span>
</li>
<li class="blue">
<h3>isisone Template</h3>
<span class="text-gray size-12">Lorem ipsum dolor sit amet, consectetuer adipiscing </span>
</li>
<li class="orange">
<h3>Deusone Template</h3>
<span class="text-gray size-12">Lorem ipsum dolor sit amet, consectetuer adipiscing </span>
</li>
</ul>
</div>
</section>
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title elipsis">
<i class="fa fa-rss"></i> Activity
</h2>
</header>
<div class="panel-body noradius padding-10">
<div class="row profile-activity">
<div class="col-xs-2 col-sm-1">
<time datetime="2014-06-29" class="datebox">
<strong>Jun</strong>
<span>29</span>
</time>
</div>
<div class="col-xs-10 col-sm-11">
<h6><a href="page-sidebar.html">Lorem ipsum dolor sit amet</a></h6>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet dolore magna aliquam
tincidunt erat volutpat.
</p>
</div>
<div class="col-sm-12">
<hr class="half-margins"/>
</div>
<div class="col-xs-2 col-sm-1">
<time datetime="2014-06-29" class="datebox">
<strong>Jun</strong>
<span>29</span>
</time>
</div>
<div class="col-xs-10 col-sm-11">
<h6><a href="page-sidebar.html">Sed diam nonummy nibh euismod</a></h6>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt laoreet dolore magna aliquam tincidunt erat volutpat laoreet dolore magna aliquam
tincidunt erat volutpat.
</p>
</div>
<div class="col-sm-12">
<hr class="half-margins"/>
</div>
<div class="text-center">
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#/">Prev</a></li>
<li class="active"><a href="#/">1</a></li>
<li><a href="#/">2</a></li>
<li><a href="#/">3</a></li>
<li><a href="#/">4</a></li>
<li><a href="#/">Next</a></li>
</ul>
</div>
</div>
</div>
</section>
</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{margin-top:20px;
background:#eee;
}
.padding-10{
padding:10px !important;
}
/** Page Profile
*************************************************** **/
.profile-buttons {
background-color:rgba(0,0,0,0.05);
padding:15px;
}
.profile-buttons h2 {
margin:0; padding:0;
font-size:30px;
line-height:30px;
}
.profile-btn-link {
padding:4px 10px !important;
margin:0 !important;
color:#999;
}
.profile-activity {
margin-top:17px;
}
.profile-activity h6 {
margin-bottom:6px;
padding-left:15px;
font-weight:bold;
}
.profile-activity p {
font-size:13px;
padding-left:15px;
}
.page-profile h6 {
color:#999;
font-size: 1em;
letter-spacing: normal;
line-height: 18px;
margin: 0 0 6px 0;
}
.page-profile div.tabs ul.nav-tabs li.active a,
.page-profile .tab-content {
background-color:#fff !important;
}
/** Comments
*************************************************** **/
#comments {
margin-top:60px;
}
#comments .comment {
margin:40px 0;
}
#comments a.replyBtn {
float:right;
font-size:11px;
text-transform:uppercase;
}
#comments span.user-avatar {
background:#eee;
width:64px; height:64px;
float:left;
margin-right:10px;
}
ul.comment {
margin-bottom:30px;
}
li.comment {
position:relative;
margin-bottom:25px;
font-size:13px;
}
li.comment p {
margin:0; padding:0;
}
li.comment img.avatar {
position:absolute;
left:0; top:0;
display:inline-block;
}
li.comment.comment-reply img.avatar {
left:6px; top:6px;
}
li.comment .comment-body {
position:relative;
padding-left:60px;
}
li.comment.comment-reply {
margin-left:60px;
background-color:#fafafa;
padding:6px;
margin-bottom:6px;
}
li.comment a.comment-author {
margin-bottom:6px;
display:block;
}
li.comment a.comment-author span {
font-size:15px;
}
li.comment-relpy {
margin-top:-15px;
margin-bottom:20px;
}
time.datebox strong {
padding: 2px 0;
color: #fff;
background-color:#1c2b36;
display:block;
text-align:center;
}
time.datebox span {
font-size: 15px;
color: #2f2f2f;
display:block;
text-align:center;
}
/** 17. Panel
*************************************************** **/
/* pannel */
.panel {
position:relative;
background:transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.panel.fullscreen .accordion .panel-body,
.panel.fullscreen .panel-group .panel-body {
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
}
.panel.fullscreen .panel-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
.panel>.panel-heading {
text-transform: uppercase;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.panel>.panel-heading small {
text-transform:none;
}
.panel>.panel-heading strong {
font-family:Arial,Helvetica,Sans-Serif;
}
.panel>.panel-heading .buttons {
display:inline-block;
margin-top:-3px;
margin-right:-8px;
}
.panel-default>.panel-heading {
padding: 15px 15px;
background:#fff;
}
.panel-default>.panel-heading small {
color:#9E9E9E;
font-size:12px;
font-weight:300;
}
.panel-clean {
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.panel-clean>.panel-heading {
padding: 11px 15px;
background:#fff !important;
color:#000;
border-bottom: #eee 1px solid;
}
.panel>.panel-heading .btn {
margin-bottom: 0 !important;
}
.panel>.panel-heading .progress {
background-color:#ddd;
}
.panel>.panel-heading .pagination {
margin:-5px;
}
.panel-default {
border:0;
}
.panel-light {
border:rgba(0,0,0,0.1) 1px solid;
}
.panel-light>.panel-heading {
padding: 11px 15px;
background:transaprent;
border-bottom:rgba(0,0,0,0.1) 1px solid;
}
.panel-heading a.opt>.fa {
display: inline-block;
font-size: 14px;
font-style: normal;
font-weight: normal;
margin-right: 2px;
padding: 5px;
position: relative;
text-align: right;
top: -1px;
}
.panel-heading>label>.form-control {
display:inline-block;
margin-top:-8px;
margin-right:0;
height:30px;
padding:0 15px;
}
.panel-heading ul.options>li>a {
color:#999;
}
.panel-heading ul.options>li>a:hover {
color:#333;
}
.panel-title a {
text-decoration:none;
display:block;
color:#333;
}
.panel-body {
background-color:#fff;
padding: 15px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.panel-body.panel-row {
padding:8px;
}
.panel-footer {
font-size:12px;
border-top:rgba(0,0,0,0.02) 1px solid;
background-color:rgba(0255,255,255,1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/** Bullet List
*************************************************** **/
ul.bullet-list li {
position: relative;
padding: 0 0 0 20px;
margin: 0 0 10px;
}
ul.bullet-list li:before {
border: 6px solid #cccccc;
border-radius: 100px;
content: '';
display: inline-block;
left: 0;
margin: 0;
position: absolute;
top: 5px;
z-index: 2;
}
ul.bullet-list li.red:before {
border-color: #d64b4b;
}
ul.bullet-list li.green:before {
border-color: #4dd79c;
}
ul.bullet-list li.blue:before {
border-color: #0090d9;
}
ul.bullet-list li.orange:before {
border-color: #E2A917;
}
ul.bullet-list li h3 {
display: block;
font-weight: 700;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.4;
color: #171717;
margin:0; padding:0;
}
/** Date Box
*************************************************** **/
time.datebox {
font-size: 14px;
display: block;
position: relative;
width: 35px;
border-color:#2E363F;
background-color: #fff;
margin: 3px auto;
border:1px solid;
}
