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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="team">
<div class="col-xs-6 col-sm-3">
<div class="team-member">
<div class="overlay-wrapper2">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-responsive" alt=""/>
<span class="overlay" style={{/*display: none;*/}}>
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-linkedin"></i></a>
</span>
</div>
<h4>John Doe</h4>
<span>CEO</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="team-member">
<div class="overlay-wrapper2">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-responsive" alt=""/>
<span class="overlay" style={{/*display: none;*/}}>
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-linkedin"></i></a>
</span>
</div>
<h4>John Doe</h4>
<span>Project Manager</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="team-member">
<div class="overlay-wrapper2">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-responsive" alt=""/>
<span class="overlay" style={{/*display: none;*/}}>
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-linkedin"></i></a>
</span>
</div>
<h4>John Doe</h4>
<span>Webdesigner</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="team-member">
<div class="overlay-wrapper2">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="img-responsive" alt=""/>
<span class="overlay" style={{/*display: none;*/}}>
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-linkedin"></i></a>
</span>
</div>
<h4>John Doe</h4>
<span>Photographer</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</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;}
#team img {
border:1px solid #EBEBEB;
padding:10px;
background-color:#F5F5F5;
}
#team h4 {
color:#555555;
font-size:20px;
font-weight:300;
margin:0 0 5px;
font-family:'Open Sans', Verdana, Geneva, sans-serif;
background-color:#EBEBEB;
padding:15px;
}
#team span {
font-size:12px;
font-weight:bold;
margin:10px 10px 5px;
display:block;
}
#team p {
color:#777777;
font-size:13px;
min-height:70px;
padding:0 10px 10px;
}
#team .team-member {
box-shadow:0 1px 5px 0 rgba(0,0,0,0.15);
}
#team .team-member .overlay-wrapper2 {
position:relative;
background-color:#F5F5F5;
}
#team .team-member .overlay-wrapper2 .overlay {
background-color:rgba(0, 0, 0, 0.7);
top:10px;
left:0;
display:none;
position:absolute;
right:0;
height:15%;
padding:0;
margin:0 11px;
text-align:center;
}
#team .team-member .overlay-wrapper2 .overlay i {
font-size:18px;
color:rgba(255, 255, 255, 0.8);
display:inline-block;
padding:10px 15px 0;
}
#team .team-member .overlay-wrapper2 .overlay i:hover {
color:rgba(255, 255, 255, 1);
}