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">
<div class="col-md-6">
<div class="card">
<div class="position-relative overflow-hidden h-200px">
<img src="https://www.bootdey.com/image/1352x300/00FFFF/000000" class="card-img rounded-top" alt=""/>
<div class="card-img-overlay text-center text-white bg-black bg-opacity-60 d-flex align-items-center flex-column justify-content-center rounded-0 rounded-top">
<div class="my-3 pt-5">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" width="100" class="rounded-circle"/>
</div>
<div>
<div class="fw-bold">Maurice Patterson</div>
<div class="fs-12px text-white text-opacity-75">Never give up</div>
</div>
</div>
</div>
<div class="card-body py-10px">
<div class="row text-center">
<div class="col-4">
<div class="fw-semibold fs-5">415</div>
<div class="small">posts</div>
</div>
<div class="col-4">
<div class="fw-semibold fs-5">140k</div>
<div class="small">followers</div>
</div>
<div class="col-4">
<div class="fw-semibold fs-5">697</div>
<div class="small">following</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="position-relative overflow-hidden h-200px">
<img src="https://www.bootdey.com/image/1352x300/00FFFF/000000" class="card-img rounded-top" alt=""/>
<div class="card-img-overlay text-center text-white bg-black bg-opacity-60 d-flex align-items-center flex-column justify-content-center rounded-0 rounded-top">
<div class="my-3 pt-5">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" width="100" class="rounded-circle"/>
</div>
<div>
<div class="fw-bold">Maurice Patterson</div>
<div class="fs-12px text-white text-opacity-75">Never give up</div>
</div>
</div>
</div>
<div class="card-body py-10px">
<div class="row text-center">
<div class="col-4">
<div class="fw-semibold fs-5">415</div>
<div class="small">posts</div>
</div>
<div class="col-4">
<div class="fw-semibold fs-5">140k</div>
<div class="small">followers</div>
</div>
<div class="col-4">
<div class="fw-semibold fs-5">697</div>
<div class="small">following</div>
</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{padding-top:20px;
background-color: rgba(235, 238, 255, 1) !important;
}
