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="col-md-8">
<div class="profile clearfix">
<div class="image">
<img src="https://www.bootdey.com/image/1000x300/FFB6C1" class="img-cover"/>
</div>
<div class="user clearfix">
<div class="avatar">
<img src="https://bootdey.com/img/Content/user-453533-fdadfd.png" class="img-thumbnail img-profile"/>
</div>
<h2>Martin maoth</h2>
<div class="actions">
<div class="btn-group">
<button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Add to friends"><span class="glyphicon glyphicon-plus glyphicon glyphicon-white"></span> Friends</button>
<button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Send message"><span class="glyphicon glyphicon-envelope glyphicon glyphicon-white"></span> Message</button>
<button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Recommend"><span class="glyphicon glyphicon-share-alt glyphicon glyphicon-white"></span> Recommend</button>
</div>
</div>
</div>
<div class="info">
<p><span class="glyphicon glyphicon-globe"></span> <span class="title">Address:</span> St. Revutskogo, Kiev, Ukraine</p>
<p><span class="glyphicon glyphicon-gift"></span> <span class="title">Date of birth:</span> 14.02.1989</p>
</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{margin-top:20px;}
.profile {
width: 100%;
position: relative;
background: #FFF;
border: 1px solid #D5D5D5;
padding-bottom: 5px;
margin-bottom: 20px;
}
.profile .image {
display: block;
position: relative;
z-index: 1;
overflow: hidden;
text-align: center;
border: 5px solid #FFF;
}
.profile .user {
position: relative;
padding: 0px 5px 5px;
}
.profile .user .avatar {
position: absolute;
left: 20px;
top: -85px;
z-index: 2;
}
.profile .user h2 {
font-size: 16px;
line-height: 20px;
display: block;
float: left;
margin: 4px 0px 0px 135px;
font-weight: bold;
}
.profile .user .actions {
float: right;
}
.profile .user .actions .btn {
margin-bottom: 0px;
}
.profile .info {
float: left;
margin-left: 20px;
}
.img-profile{
height:100px;
width:100px;
}
.img-cover{
width:800px;
height:300px;
}
@media (max-width: 768px) {
.btn-responsive {
padding:2px 4px;
font-size:80%;
line-height: 1;
border-radius:3px;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.btn-responsive {
padding:4px 9px;
font-size:90%;
line-height: 1.2;
}
}