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 start2. 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 again3. 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 rel="stylesheet" href="//cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css"/>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<p class="text-muted text-center mb-4 f-17">Praesent venenatis metus at tortor pulvinar varius ipsum dolor amet consectetuer adipiscing Aenean commodo ligula.</p>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="team-box text-center bg-white mt-4">
<div class="team-img">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-fluid d-block rounded"/>
<div class="team-name">
<h5 class="text-white f-18 font-weight-light mb-0">Darryl Abell</h5>
</div>
</div>
<div class="team-content text-center p-3">
<div class="">
<p class="f-17 mb-0"><a href="#/" class="text-dark">Graphic Designer</a></p>
<p class="text-muted f-14 mb-0">Phasellus ullamcorper ipsum nunc nunc nonummy metus.</p>
<div class="team-social-icon p-2">
<ul class="blog-details-icons list-inline mb-0">
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-facebook"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-twitter"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-whatsapp"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="team-box text-center bg-white mt-4">
<div class="team-img">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-fluid d-block rounded"/>
<div class="team-name">
<h5 class="text-white f-18 font-weight-light mb-0">Roger Utz</h5>
</div>
</div>
<div class="team-content text-center p-3">
<div class="">
<p class="f-17 mb-0"><a href="#/" class="text-dark">Web Designer</a></p>
<p class="text-muted f-14 mb-0">Etiam ultricies nisi augue Curabitur ullamcorper ultricies.</p>
<div class="team-social-icon p-2">
<ul class="blog-details-icons list-inline mb-0">
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-facebook"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-twitter"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-whatsapp"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="team-box text-center bg-white mt-4">
<div class="team-img">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-fluid d-block rounded"/>
<div class="team-name">
<h5 class="text-white f-18 font-weight-light mb-0">Sylvia Mace</h5>
</div>
</div>
<div class="team-content text-center p-3">
<div class="">
<p class="f-17 mb-0"><a href="#/" class="text-dark">UI/UX Designer</a></p>
<p class="text-muted f-14 mb-0">Nunc nec neque a leo dolor tempus non hendrerit nisi.</p>
<div class="team-social-icon p-2">
<ul class="blog-details-icons list-inline mb-0">
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-facebook"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-twitter"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-whatsapp"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="team-box text-center bg-white mt-4">
<div class="team-img">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-fluid d-block rounded"/>
<div class="team-name">
<h5 class="text-white f-18 font-weight-light mb-0">Juan Bluford</h5>
</div>
</div>
<div class="team-content text-center p-3">
<div class="">
<p class="f-17 mb-0"><a href="#/" class="text-dark">Web Designer</a></p>
<p class="text-muted f-14 mb-0">Nunc nec neque a leo dolor tempus non hendrerit nisi.</p>
<div class="team-social-icon p-2">
<ul class="blog-details-icons list-inline mb-0">
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-facebook"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-twitter"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-whatsapp"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="team-box text-center bg-white mt-4">
<div class="team-img">
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-fluid d-block rounded"/>
<div class="team-name">
<h5 class="text-white f-18 font-weight-light mb-0">Robin Douglas</h5>
</div>
</div>
<div class="team-content text-center p-3">
<div class="">
<p class="f-17 mb-0"><a href="#/" class="text-dark">Web Developer</a></p>
<p class="text-muted f-14 mb-0">Maecenas tellus eget condimentum sem quam semper.</p>
<div class="team-social-icon p-2">
<ul class="blog-details-icons list-inline mb-0">
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-facebook"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-twitter"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-whatsapp"></i></a></li>
<li class="list-inline-item"><a href="#/" class=""><i class="mdi mdi-instagram"></i></a></li>
</ul>
</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:#eee;
margin-top:20px;
}
/********************
TEAM
*********************/
.team-bg {
padding: 180px 0px 80px 0px;
background-size: cover;
position: relative;
background-position: center center;
}
.team-box {
position: relative;
overflow: hidden;
}
.team-name {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 10px;
}
.team-img {
position: relative;
overflow: hidden;
display: block;
}
.blog-details-icons li {
margin: 2px !important;
}
.blog-details-icons li a {
height: 32px;
width: 32px;
color: #777777;
text-align: center;
font-size: 15px;
display: inline-block;
line-height: 30px;
border-radius: 50%;
border: 1px solid #777777;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.blog-details-icons li a:hover {
background-color: #ff4f6c;
color: #ffffff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
border-color: #ff4f6c;
}
.blog-datails-item li a {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.blog-datails-item li a:hover {
color: #ff4f6c !important;
-webkit-transition: all 0.5s;
transition: all 0.5s;
margin-left: 6px;
}
