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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.27.0/feather.min.js" integrity="sha256-xHkYry2yRjy99N8axsS5UL/xLHghksrFOGKm9HvFZIs=" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card m-b-30">
<div class="card-body py-5">
<div class="row">
<div class="col-lg-3 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid mb-3" alt="user" />
</div>
<div class="col-lg-9">
<h4>John Doe</h4>
<p>www.example.com</p>
<div class="button-list mt-4 mb-3">
<button type="button" class="btn btn-primary-rgba"><i class="feather icon-message-square mr-2"></i>Message</button>
<button type="button" class="btn btn-success-rgba"><i class="feather icon-phone mr-2"></i>Call Now</button>
</div>
<div class="table-responsive">
<table class="table table-borderless mb-0">
<tbody>
<tr>
<th scope="row" class="p-1">Category :</th>
<td class="p-1">Web Development</td>
</tr>
<tr>
<th scope="row" class="p-1">Work Hrs :</th>
<td class="p-1">58</td>
</tr>
<tr>
<th scope="row" class="p-1">Country :</th>
<td class="p-1">Italy</td>
</tr>
<tr>
<th scope="row" class="p-1">Email ID :</th>
<td class="p-1">[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card m-b-30">
<div class="card-body py-5">
<div class="row">
<div class="col-lg-3 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-fluid mb-3" alt="user" />
</div>
<div class="col-lg-9">
<h4>Mark Wood</h4>
<p>www.example.com</p>
<div class="button-list mt-4 mb-3">
<button type="button" class="btn btn-primary-rgba"><i class="feather icon-message-square mr-2"></i>Message</button>
<button type="button" class="btn btn-success-rgba"><i class="feather icon-phone mr-2"></i>Call Now</button>
</div>
<div class="table-responsive">
<table class="table table-borderless mb-0">
<tbody>
<tr>
<th scope="row" class="p-1">Category :</th>
<td class="p-1">Web Designing</td>
</tr>
<tr>
<th scope="row" class="p-1">Work Hrs :</th>
<td class="p-1">95</td>
</tr>
<tr>
<th scope="row" class="p-1">Country :</th>
<td class="p-1">USA</td>
</tr>
<tr>
<th scope="row" class="p-1">Email ID :</th>
<td class="p-1">[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card m-b-30">
<div class="card-body py-5">
<div class="row">
<div class="col-lg-3 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-fluid mb-3" alt="user" />
</div>
<div class="col-lg-9">
<h4>Kate Perry</h4>
<p>www.example.com</p>
<div class="button-list mt-4 mb-3">
<button type="button" class="btn btn-primary-rgba"><i class="feather icon-message-square mr-2"></i>Message</button>
<button type="button" class="btn btn-success-rgba"><i class="feather icon-phone mr-2"></i>Call Now</button>
</div>
<div class="table-responsive">
<table class="table table-borderless mb-0">
<tbody>
<tr>
<th scope="row" class="p-1">Category :</th>
<td class="p-1">UI Designing</td>
</tr>
<tr>
<th scope="row" class="p-1">Work Hrs :</th>
<td class="p-1">110</td>
</tr>
<tr>
<th scope="row" class="p-1">Country :</th>
<td class="p-1">Australia</td>
</tr>
<tr>
<th scope="row" class="p-1">Email ID :</th>
<td class="p-1">[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card m-b-30">
<div class="card-body py-5">
<div class="row">
<div class="col-lg-3 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-fluid mb-3" alt="user" />
</div>
<div class="col-lg-9">
<h4>Slevenka Rajaswki</h4>
<p>www.example.com</p>
<div class="button-list mt-4 mb-3">
<button type="button" class="btn btn-primary-rgba"><i class="feather icon-message-square mr-2"></i>Message</button>
<button type="button" class="btn btn-success-rgba"><i class="feather icon-phone mr-2"></i>Call Now</button>
</div>
<div class="table-responsive">
<table class="table table-borderless mb-0">
<tbody>
<tr>
<th scope="row" class="p-1">Category :</th>
<td class="p-1">App Development</td>
</tr>
<tr>
<th scope="row" class="p-1">Work Hrs :</th>
<td class="p-1">225</td>
</tr>
<tr>
<th scope="row" class="p-1">Country :</th>
<td class="p-1">Germany</td>
</tr>
<tr>
<th scope="row" class="p-1">Email ID :</th>
<td class="p-1">[email protected]</td>
</tr>
</tbody>
</table>
</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{
background:#f2f3f7;
margin-top:20px;
}
.m-b-30 {
margin-bottom: 30px;
}
p{
color: #8A98AC;
}
.table-borderless td {
border: 0 !important;
}
.table td {
color: #8A98AC;
vertical-align: middle;
border-top: 1px solid rgba(0, 0, 0, 0.03);
padding: 0.6rem;
}
.btn-primary-rgba {
background-color: rgba(80, 111, 228, 0.1);
border: none;
color: #506fe4;
}
.btn-success-rgba {
background-color: rgba(67, 209, 135, 0.1);
border: none;
color: #43d187;
}
.card {
border: none;
border-radius: 3px;
background-color: #ffffff;
}
