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]/css/boxicons.min.css"/>
<div class="container">
<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4">
<div class="col">
<div class="card radius-15 bg-primary">
<div class="card-body text-center">
<div class="p-4 radius-15">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" width="110" height="110" class="rounded-circle shadow p-1 bg-white" alt=""/>
<h5 class="mb-0 mt-5 text-white">Pauline I. Bird</h5>
<p class="mb-3 text-white">Webdeveloper</p>
<div class="list-inline contacts-social mt-3 mb-3"> <a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-facebook"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-twitter"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-linkedin"></i></a>
</div>
<div class="d-grid"> <a href="#/" class="btn btn-white radius-15">Contact Me</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card radius-15 bg-danger">
<div class="card-body text-center">
<div class="p-4 radius-15">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" width="110" height="110" class="rounded-circle shadow p-1 bg-white" alt=""/>
<h5 class="mb-0 mt-5 text-white">Pauline I. Bird</h5>
<p class="mb-3 text-white">Webdeveloper</p>
<div class="list-inline contacts-social mt-3 mb-3"> <a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-facebook"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-twitter"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-linkedin"></i></a>
</div>
<div class="d-grid"> <a href="#/" class="btn btn-white radius-15">Contact Me</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card radius-15 bg-warning">
<div class="card-body text-center">
<div class="p-4 radius-15">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" width="110" height="110" class="rounded-circle shadow p-1 bg-white" alt=""/>
<h5 class="mb-0 mt-5 text-dark">Pauline I. Bird</h5>
<p class="mb-3 text-dark">Webdeveloper</p>
<div class="list-inline contacts-social mt-3 mb-3"> <a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-facebook"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-twitter"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-linkedin"></i></a>
</div>
<div class="d-grid"> <a href="#/" class="btn btn-white radius-15">Contact Me</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card radius-15 bg-info">
<div class="card-body text-center">
<div class="p-4 radius-15">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" width="110" height="110" class="rounded-circle shadow p-1 bg-white" alt=""/>
<h5 class="mb-0 mt-5 text-dark">Pauline I. Bird</h5>
<p class="mb-3 text-dark">Webdeveloper</p>
<div class="list-inline contacts-social mt-3 mb-3"> <a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-facebook"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-twitter"></i></a>
<a href="javascript:;" class="list-inline-item border-0"><i class="bx bxl-linkedin"></i></a>
</div>
<div class="d-grid"> <a href="#/" class="btn btn-white radius-15">Contact Me</a>
</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-color: #f7f7ff;
margin-top:20px;
}
.btn-white {
background-color: #fff;
border-color: #e7eaf3;
}
.radius-15 {
border-radius: 15px;
}
.contacts-social a {
font-size: 16px;
width: 36px;
height: 36px;
line-height: 36px;
background: #ffffff;
border: 1px solid #eeecec;
text-align: center;
border-radius: 50%;
color: #2b2a2a;
}
.bg-info {
background-color: #0dcaf0!important;
}
.bg-primary {
background-color: #008cff!important;
}
.bg-danger {
background-color: #fd3550!important;
}
.bg-warning {
background-color: #ffc107!important;
}
