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 rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"/>
<div class="em-background-box text-white content">
<div class="container">
<div class="text-center em-background-box-content">
<ul class="list-inline">
<li>
<a href="#/" class="tip" title="Add friend">
<i class="glyphicon glyphicon-plus line-icon-circle"></i>
</a>
</li>
<li>
<img class="img-circle img-em-border" src="https://bootdey.com/img/Content/user_1.jpg"/>
</li>
<li>
<a href="#/" class="tip" title="Send message">
<i class="line-icon glyphicon glyphicon-comment line-icon-circle"></i>
</a>
</li>
</ul>
<h1 class="thin">Deyson Bejarano</h1>
<h4>
<i class="fa fa-map-marker"></i>
<span class="thin">Medellin, Colombia</span>
</h4>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="semi-well-dk em-background-box-actions">
<div class="row">
<div class="col-md-7 push-bottom-sm">
<ul class="list-inline no-margin v-mid-row">
<li>
<a href="#/" class="tip" title="Option">
<img class="img-circle" src="https://bootdey.com/img/Content/icons/32/PNG/32/rocket.png"/>
</a>
</li>
<li>
<a href="#/" class="tip" title="Option">
<img class="img-circle" src="https://bootdey.com/img/Content/icons/32/PNG/32/packman.png"/>
</a>
</li>
<li>
<a href="#/" class="tip" title="Option">
<img class="img-circle" src="https://bootdey.com/img/Content/icons/32/PNG/32/cloud-up.png"/>
</a>
</li>
<li class="text-center">
<h5 class="base-header">Followers</h5>
<h4 class="base-header major">4.884</h4>
</li>
</ul>
</div>
<div class="col-md-5">
<ul class="list-inline">
<li class="option">
<img class="img-circle" src="https://bootdey.com/img/Content/icons/32/PNG/32/clock.png"/>
</li>
<li class="text-center">
<h5 class="base-header">Sales</h5>
<h4 class="base-header major">$3.593</h4>
</li>
<li class="option">
<img class="img-circle" src="https://bootdey.com/img/Content/icons/32/PNG/32/photo.png"/>
</li>
<li class="text-center">
<h5 class="base-header">Followers</h5>
<h4 class="base-header major">+84</h4>
</li>
</ul>
</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 :
.content{
background-image: url(https://www.bootdey.com/image/1100x500/FFB6C1/000000);
}
.list-inline .option{
width: 80px; height: 30px;
}
.major {
font-weight: 600;
}
.base-header {
margin-top: 0;
margin-bottom: 0;
line-height: inherit;
}
.em-background-box .em-background-box-actions {
margin-top: 15px;
min-height: 50px;
}
.semi-well-dk {
background: rgba(0,0,0,0.3);
color: #fff;
}
.semi-well-dk, .semi-well-lt {
border-radius: 6px;
padding: 20px;
}
.img-em-border {
border: 8px solid rgba(255,255,255,0.3);
}
.img-circle {
border-radius: 50%;
}
img {
vertical-align: middle;
}
.line-icon-circle {
border: 1px solid rgba(242,244,248,0.7);
border-radius: 50%;
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
color: #fff;
-webkit-transition: border-color 0.3s;
-moz-transition: border-color 0.3s;
-o-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.thin {
font-weight: 300;
}
h1, .h1 {
font-size: 33px;
}
.list-inline {
margin-left: -5px;
}
.list-unstyled, .list-inline {
padding-left: 0;
list-style: none;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
.em-background-box .em-background-box-content {
position: relative;
z-index: 2;
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.navbar+.em-background-box {
margin-top: -15px;
margin-bottom: 15px;
}
.em-background-box {
border-bottom: 4px solid #5bc0de;
}
.em-background-box {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}
.text-white {
color: white;
}