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="col-sm-4">
<div class="box-info text-center user-profile-2">
<div class="header-cover">
<img src="https://www.bootdey.com/image/350x280/FFB6C1/000000" alt="User cover"/>
</div>
<div class="user-profile-inner">
<h4 class="white">Jonny doe</h4>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-circle profile-avatar" alt="User avatar"/>
<h5>Administrator</h5>
<div class="user-button">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-info text-center user-profile-2">
<div class="header-cover">
<img src="https://www.bootdey.com/image/350x280/87CEFA/000000" alt="User cover"/>
</div>
<div class="user-profile-inner">
<h4 class="white">Jonny doe</h4>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-circle profile-avatar" alt="User avatar"/>
<h5>Administrator</h5>
<div class="user-button">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-info text-center user-profile-2">
<div class="header-cover">
<img src="https://www.bootdey.com/image/350x280/FF7F50/000000" alt="User cover"/>
</div>
<div class="user-profile-inner">
<h4 class="white">Jonny doe</h4>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-circle profile-avatar" alt="User avatar"/>
<h5>Administrator</h5>
<div class="user-button">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button>
</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:#EEEEEE;
}
.user-profile-2 {
text-align: center;
position: relative;
margin-top:10px;
}
.box-info {
position: relative;
padding: 15px;
background: #fff;
color: #5b5b5b;
margin-bottom: 20px;
-webkit-transition: All 0.4s ease;
-moz-transition: All 0.4s ease;
-o-transition: All 0.4s ease;
border-bottom:4px solid #DDDDDD;
}
.user-profile-2 .header-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 130px;
overflow: hidden;
z-index: 1;
}
.user-profile-2 .user-profile-inner {
z-index: 2;
position: relative;
}
.user-profile-2 .user-profile-inner h4.white {
color: #fff;
}
.user-profile-2 .user-profile-inner img.profile-avatar {
box-shadow: 0 0 0 5px rgba(255,255,255,1);
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,1);
border: none;
width:100px;
height:100px;
}
.user-button {
margin: 15px 0;
}