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" >
<div class="row" >
<div class="col-lg-8 col-md-8 col-xs-12">
<div class="panel panel-default plain profile-panel">
<div class="panel-heading white-content p-left p-right">
<img class="profile-image img-responsive" src="https://www.bootdey.com/image/1000x200/FF69B4/000000" alt="profile cover"/>
</div>
<div class="panel-body">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="profile-avatar">
<img class="img-responsive" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="profile picture"/>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="user-name">
Full name <span class="label label-success">admin</span>
</div>
<div class="user-information">
<p>Creating awesome snippet for bootdey, bootdey is a gellery of free bootstrap snippets bootdeys</p>
</div>
<div class="profile-stats-info">
<a href="#/" title="Views"> <i class="glyphicon glyphicon-eye-open"> </i> <strong>2000</strong></a>
<a href="#/" title="Comments"> <i class="glyphicon glyphicon-comment"> </i> <strong>120</strong></a>
<a href="#/" title="Likes"> <i class="glyphicon glyphicon-thumbs-up"> </i> <strong>60</strong></a>
</div>
</div>
</div>
<div class="panel-footer white-content">
<ul class="profile-info">
<li><i class="glyphicon glyphicon-phone"></i> +534 354 534</li>
<li><i class="glyphicon glyphicon-map-marker"></i> Medellin, colombia</li>
<li><i class="glyphicon glyphicon-envelope"></i> [email protected]</li>
<li><i class="glyphicon glyphicon-edit"></i> Web developer</li>
<li><i class="glyphicon glyphicon-share"></i> [email protected]</li>
</ul>
</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 :
.profile-panel .profile-info {
padding: 0;
margin: 0;
list-style: none;
}
.panel-footer {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
}
.panel-footer {
padding: 10px 15px;
background-color: #f3f5f6;
border-top: 1px solid #ddd;
}
.panel-default .panel-footer {
color: #768399;
background-color: #e4e9eb;
border: 1px solid #e4e9eb;
border-top: none;
}
.panel.plain .panel-footer {
border-top: none;
}
.panel-footer .white-content {
color: #768399;
background: #fff;
background-color: #fff;
}
.profile-panel .profile-stats-info a {
font-size: 24px;
margin-right: 10px;
margin-top: 10px;
color: #79859b;
}
.profile-panel .user-name {
margin-top: 10px;
font-size: 22px;
margin-bottom: 10px;
}
.profile-panel .profile-avatar img {
border-radius: 50%;
border: 1px solid #e7e7e2;
}
.profile-panel .profile-avatar {
border-radius: 50%;
padding: 10px;
border: 1px solid #e7e7e2;
float: left;
}
.panel-default .panel-body {
border: 1px solid #e4e9eb;
border-top: none;
}
.panel-body {
padding: 15px;
}
.profile-panel .profile-image {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.panel {
position: relative;
margin-bottom: 25px;
border-radius: 4px;
border: 0;
box-shadow: none;
}
.panel-default {
border-color: #e4e9eb;
}
.panel.plain .panel-default .panel-heading {
border: 1px solid #e4e9eb;
border-bottom: none;
}
.panel.plain .panel-heading {
border-bottom: none;
}
.panel.panel-default .panel-heading {
color: #768399;
}
.panel-heading .white-content {
color: #768399;
background: #fff;
background-color: #fff;
}
.panel-default .panel-heading {
color: #768399;
background-color: #e4e9eb;
border-color: #e4e9eb;
}
.white-content {
color: #768399;
background: #fff;
background-color: #fff;
}
.p-left {
padding-left: 0!important;
}
.p-right {
padding-right: 0!important;
}
.panel-heading {
padding: 0 15px;
min-height: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}