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-md-8">
<div class="panel panel-white profile-widget panel-shadow">
<div class="row">
<div class="col-sm-12">
<div class="image-container bg2">
<img src="https://bootdey.com/img/Content/user_3.jpg" class="avatar" alt="avatar"/>
</div>
</div>
<div class="col-sm-12">
<div class="details">
<h4>Barbao's slim <i class="fa fa-sheild"></i></h4>
<div>Works at bootdey</div>
<div>Attended University of colombia</div>
<div>Lives in medellin, colombia</div>
<div class="mg-top-10">
<a href="#/" class="btn btn-info">About Barbao's</a>
<a href="#/" class="btn btn-success">Follow</a>
</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 :
.panel-shadow {
box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 7px;
}
.panel-white {
border: 1px solid #dddddd;
}
.panel {
font-size: 13px;
color: #454545;
background: #fafafa;
position: relative;
overflow-x: hidden;
font-family: 'Source Sans Pro', 'Oxygen', sans-serif;
}
.panel-white .panel-heading {
color: #333;
background-color: #fff;
border-color: #ddd;
}
.panel-white .panel-footer {
background-color: #fff;
border-color: #ddd;
}
.bg2 {
background-image: url('https://www.bootdey.com/image/560x344/FF4500/000000');
}
.profile-widget {
position: relative;
}
.profile-widget .image-container {
background-size: cover;
background-position: center;
padding: 190px 0 10px;
}
.profile-widget .image-container .profile-background {
width: 100%;
height: auto;
}
.profile-widget .image-container .avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto -60px;
display: block;
}
.profile-widget .details {
padding: 50px 15px 15px;
text-align: center;
}