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 bootstrap snippets bootdey">
<div class="row profile">
<div class="col-md-3" id="profileCol">
<div class="profile-sidebar">
<div class="profile-userpic">
<img src="https://bootdey.com/img/Content/User_for_snippets.png" class="img-responsive" alt=""/>
</div>
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Clark rodriguez
</div>
</div>
<div class="profile-userbuttons">
<button type="button" class="btn btn-info btn-sm">
<i class="fa fa-user-plus"></i>
Follow
</button>
</div>
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#/">
<i class="glyphicon glyphicon-home"></i>
Overview </a>
</li>
<li>
<a href="#/">
<i class="glyphicon glyphicon-user"></i>
Account Settings </a>
</li>
<li>
<a href="#/" target="_blank">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li>
<a href="#/">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9" id="contentCol">
<div class="profile-content">
<div class="row hidden-xs hidden-sm">
<a href="#/" class="btn btn-info" id="toggle-link">
<i class="fa fa-arrow-left"></i>
Hide menu
</a>
<hr class="hr-sep"/>
</div>
<div class="row ">
<div class="col-md-4 col-sm-6 follower-item">
<div class="ibox-content text-center">
<h2 class="text-muted h-name">Deyson Smith</h2>
<div class="m-b-sm">
<img alt="image" class="img-circle circle-border" src="https://bootdey.com/img/Content/user_1.jpg"/>
</div>
<p></p>
<div class="text-center">
<a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> </a>
<a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a>
<a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a>
<a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 follower-item">
<div class="ibox-content text-center">
<h2 class="text-muted h-name">Nicki Smith</h2>
<div class="m-b-sm">
<img alt="image" class="img-circle circle-border" src="https://bootdey.com/img/Content/user_2.jpg"/>
</div>
<p></p>
<div class="text-center">
<a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> </a>
<a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a>
<a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a>
<a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 follower-item">
<div class="ibox-content text-center">
<h2 class="text-muted h-name">Barbao Smith</h2>
<div class="m-b-sm">
<img alt="image" class="img-circle circle-border" src="https://bootdey.com/img/Content/user_3.jpg"/>
</div>
<p></p>
<div class="text-center">
<a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> </a>
<a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a>
<a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a>
<a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a>
</div>
</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: #eee;
}
.toggled {
position: absolute;
margin-right: -250px;
}
#profileCol .profile-sidebar{
min-height: 410px;
}
.hr-sep{
border:1px solid #eee;
}
.profile {
margin: 20px 0;
}
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
.profile-content {
padding: 20px;
background: #fff;
min-height: 410px;
}
.ibox-content {
background-color: #eee;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
}
.h-name{
font-size:20px;
}
img.circle-border {
border: 2px solid #fff;
border-radius: 50%;
}
.follower-list{
background:#eee;
}
.follower-item{
margin-top:3px;
}
.btn {
border-radius: 0;
border: 0;
border-bottom: 4px solid #CCCCCC;
margin:0;
-webkit-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
-moz-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
}
.btn .btn-block:active, .btn .btn-lg:active {
-webkit-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
}
.btn-default {
color: #555;
background-color: #f9f9f9;
border-color: #cacaca;
text-shadow: 1px 1px 0 #f5f5f5;
}
.btn-default:hover, .btn-default:focus {
background-color: #f4f4f4;
border-color: #bebebe;
}
.btn-success {
background-color: #80d752;
border-color: #61be26;
text-shadow: 1px 1px 0 #5fdb34;
}
.btn-success:hover, .btn-success:focus {
background-color: #75cd53;
border-color: #53aa27;
}
.btn-info {
background-color: #39b3d7;
border-color: #348fd2;
text-shadow: 1px 1px 0 #238ed5;
}
.btn-info:hover, .btn-info:focus {
background-color: #45abcd;
border-color: #347abe;
}
.btn-warning {
background-color: #FEAF20;
border-color: #d79a34;
text-shadow: 1px 1px 0 #db9e34;
}
.btn-warning:hover, .btn-warning:focus {
background-color: #f5a620;
border-color: #cd9034;
}
.btn-danger {
background-color: #d73814;
border-color: #be0000;
text-shadow: 1px 1px 0 #ac2925;
}
.btn-danger:hover, .btn-danger:focus {
background-color: #cd3714;
border-color: #aa0000;
}
.btn-primary {
background-color: #4274d7;
border-color: #4d5bbe;
text-shadow: 1px 1px 0 #232bd5;
}
.btn-primary:hover, .btn-primary:focus {
background-color: #426acd;
border-color: #4f56aa;
}
.btn-magick {
color: #fff;
background-color: #bb39d7;
border-color: #9a00cd;
text-shadow: 1px 1px 0 #9823d5;
}
.btn-magick:hover, .btn-magick:focus {
color: #fff;
background-color: #b13acd;
border-color: #8600b9;
}
.btn-pressure {
position: relative;
margin-bottom: 0;
}
.btn-pressure:focus {
-moz-outline-style:none;
outline:medium none;
}
.btn-pressure:active, .btn-pressure.active {
top: 4px;
border: 0;
position: relative;
}
.btn-sensitive:active, .btn-sensitive.active {
top: 1px;
margin-top: 4px;
}
