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="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"/>
<section id="team" class="section bg-gray-100">
<div class="container">
<div class="row section-heading justify-content-center text-center wow fadeInUp" data-wow-duration="0.3s" data-wow-delay="0.3s" style={{/*visibility: visible; animation-duration: 0.3s; animation-delay: 0.3s; animation-name: fadeInUp;*/}}>
<div class="col-lg-8 col-xl-6">
<h3 class="h1 bg-primary-after after-50px pb-3 mb-3">Our Advisors</h3>
<div class="lead">Mombo is a HTML5 template based on Sass and Bootstrap 5 with modern and creative multipurpose design you can use it as a startups.</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6 my-3 wow fadeInUp" data-wow-duration="0.3s" data-wow-delay="0.3s" style={{/*visibility: visible; animation-duration: 0.3s; animation-delay: 0.3s; animation-name: fadeInUp;*/}}>
<div class="hover-top-in text-center">
<div class="overflow-hidden z-index-1 position-relative px-5"><img class="rounded-circle border border-5 border-white shadow" src="https://bootdey.com/img/Content/avatar/avatar1.png" title="" alt=""/></div>
<div class="mx-2 mx-xl-3 shadow rounded-3 position-relative mt-n4 bg-white p-4 pt-6 mx-4 text-center hover-top--in">
<h6 class="fw-700 dark-color mb-1">Nancy Bayers</h6><small>Co-Founder</small>
<div class="pt-2"><a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-facebook"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-twitter"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white"
href="#/"><i class="bi bi-linkedin"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-instagram"></i></a></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 my-3 wow fadeInUp" data-wow-duration="0.3s" data-wow-delay="0.3s" style={{/*visibility: visible; animation-duration: 0.3s; animation-delay: 0.3s; animation-name: fadeInUp;*/}}>
<div class="hover-top-in text-center">
<div class="overflow-hidden z-index-1 position-relative px-5"><img class="rounded-circle border border-5 border-white shadow" src="https://bootdey.com/img/Content/avatar/avatar2.png" title="" alt=""/></div>
<div class="mx-2 mx-xl-3 shadow rounded-3 position-relative mt-n4 bg-white p-4 pt-6 mx-4 text-center hover-top--in">
<h6 class="fw-700 dark-color mb-1">Nancy Bayers</h6><small>Co-Founder</small>
<div class="pt-2"><a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-facebook"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-twitter"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white"
href="#/"><i class="bi bi-linkedin"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-instagram"></i></a></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 my-3 wow fadeInUp" data-wow-duration="0.3s" data-wow-delay="0.3s" style={{/*visibility: visible; animation-duration: 0.3s; animation-delay: 0.3s; animation-name: fadeInUp;*/}}>
<div class="hover-top-in text-center">
<div class="overflow-hidden z-index-1 position-relative px-5"><img class="rounded-circle border border-5 border-white shadow" src="https://bootdey.com/img/Content/avatar/avatar3.png" title="" alt=""/></div>
<div class="mx-2 mx-xl-3 shadow rounded-3 position-relative mt-n4 bg-white p-4 pt-6 mx-4 text-center hover-top--in">
<h6 class="fw-700 dark-color mb-1">Nancy Bayers</h6><small>Co-Founder</small>
<div class="pt-2"><a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-facebook"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-twitter"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white"
href="#/"><i class="bi bi-linkedin"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-instagram"></i></a></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 my-3 wow fadeInUp" data-wow-duration="0.3s" data-wow-delay="0.4s" style={{/*visibility: visible; animation-duration: 0.3s; animation-delay: 0.4s; animation-name: fadeInUp;*/}}>
<div class="hover-top-in text-center">
<div class="overflow-hidden z-index-1 position-relative px-5"><img class="rounded-circle border border-5 border-white shadow" src="https://bootdey.com/img/Content/avatar/avatar4.png" title="" alt=""/></div>
<div class="mx-2 mx-xl-3 shadow rounded-3 position-relative mt-n4 bg-white p-4 pt-6 mx-4 text-center hover-top--in">
<h6 class="fw-700 dark-color mb-1">Nancy Bayers</h6><small>Co-Founder</small>
<div class="pt-2"><a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-facebook"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-twitter"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white"
href="#/"><i class="bi bi-linkedin"></i></a> <a class="icon-sm bg-primary rounded-circle me-1 text-white" href="#/"><i class="bi bi-instagram"></i></a></div>
</div>
</div>
</div>
</div>
</div>
</section>
</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;
background:rgba(241,246,253);
}
.rounded-circle {
border-radius: 50%!important;
}
.border-5 {
border-width: 5px;
}
.border-white {
border-opacity: 1;
border-color: rgba(255,255,255, 1) !important;
}
.shadow {
box-shadow: 0 0.375rem 1.5rem 0 rgba(140,152,164,.125)!important;
}
img {
max-width: 100%;
height: auto;
}
.icon-sm {
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 75%;
line-height: normal;
}
.rounded-circle {
border-radius: 50%!important;
}
.hover-top-in .hover-top--in {
transition: ease-in-out all .35s;
position: relative;
top: 0
}
.hover-top-in:hover .hover-top--in {
top: -10px
}
.me-1 {
margin-right: 0.25rem!important;
}
.fw-700 {
font-weight: 700!important;
}
.mb-1 {
margin-bottom: 0.25rem!important;
}
.z-index-1 {
z-index: 1!important;
}
.pt-6 {
padding-top: 2.5rem!important;
}
.p-4 {
padding: 1.5rem!important;
}
.mt-n4 {
margin-top: -1.5rem!important;
}
.shadow {
box-shadow: 0 0.375rem 1.5rem 0 rgba(var(--bs-gray-700-rgb),.125)!important;
}
.px-5 {
padding-right: 2rem!important;
padding-left: 2rem!important;
}
.position-relative {
position: relative!important;
}
.overflow-hidden {
overflow: hidden!important;
}
