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>
<div class="container">
<div class="row mb-4">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card hover-lift hover-shadow-xl shadow-sm border-0">
<div class="card-body p-4">
<div class="d-flex mb-4 align-items-center">
<div class="flex-grow-1 d-flex align-items-center">
<div class="width-5x height-5x p-2 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-fluid" alt=""/>
</div>
</div>
</div>
<h5>Business Management</h5>
<p class="mb-0 text-muted">124 Jobs opportunities</p>
</div>
<a href="#!" class="stretched-link"></a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card hover-lift hover-shadow-xl shadow-sm border-0">
<div class="card-body p-4">
<div class="d-flex mb-4 align-items-center">
<div class="flex-grow-1 d-flex align-items-center">
<div class="width-5x height-5x p-2 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-fluid" alt=""/>
</div>
</div>
</div>
<h5>UI Designer</h5>
<p class="mb-0 text-muted">76 Jobs opportunities</p>
</div>
<a href="#!" class="stretched-link"></a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card hover-lift hover-shadow-xl shadow-sm border-0">
<div class="card-body p-4">
<div class="d-flex mb-4 align-items-center">
<div class="flex-grow-1 d-flex align-items-center">
<div class="width-5x height-5x p-2 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-fluid" alt=""/>
</div>
</div>
</div>
<h5>Software Engineer</h5>
<p class="mb-0 text-muted">54 Jobs opportunities</p>
</div>
<a href="#!" class="stretched-link"></a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card hover-lift hover-shadow-xl shadow-sm border-0">
<div class="card-body p-4">
<div class="d-flex mb-4 align-items-center">
<div class="flex-grow-1 d-flex align-items-center">
<div class="width-5x height-5x p-2 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-fluid" alt=""/>
</div>
</div>
</div>
<h5>Sales & Marketing</h5>
<p class="mb-0 text-muted">28 Jobs opportunities</p>
</div>
<a href="#!" class="stretched-link"></a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card hover-lift hover-shadow-xl shadow-sm border-0">
<div class="card-body p-4">
<div class="d-flex mb-4 align-items-center">
<div class="flex-grow-1 d-flex align-items-center">
<div class="width-5x height-5x p-2 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-fluid" alt=""/>
</div>
</div>
</div>
<h5>Data Science</h5>
<p class="mb-0 text-muted">14 Jobs opportunities</p>
</div>
<a href="#!" class="stretched-link"></a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card hover-lift hover-shadow-xl shadow-sm border-0">
<div class="card-body p-4">
<div class="d-flex mb-4 align-items-center">
<div class="flex-grow-1 d-flex align-items-center">
<div class="width-5x height-5x p-2 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-fluid" alt=""/>
</div>
<div class="width-5x height-5x p-2 ms-n3 bg-white shadow-sm position-relative flex-center rounded-circle border">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-fluid" alt=""/>
</div>
</div>
</div>
<h5>Content Creator</h5>
<p class="mb-0 text-muted">7 Jobs opportunities</p>
</div>
<a href="#!" class="stretched-link"></a>
</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;
background:#eee;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.height-5x {
height: 3rem!important;
}
.width-5x {
width: 3rem!important;
}
.flex-center {
justify-content: center!important;
}
.flex-center {
align-items: center!important;
}
.rounded-circle {
border-radius: 50%!important;
}
.align-items-center {
align-items: center!important;
}
.flex-grow-1 {
flex-grow: 1!important;
}
.d-flex {
display: flex!important;
}
.position-relative {
position: relative!important;
}
.shadow-sm {
box-shadow: 0 .125rem .25rem rgba(13,15,12,.075)!important;
}
.ms-n3 {
margin-left: -1rem!important;
}
