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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-4 col-xlg-3 col-md-5">
<div class="card">
<div class="card-body">
<center class="m-t-30"> <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-circle" width="150"/>
<h4 class="card-title m-t-10">John Doe</h4>
<h6 class="card-subtitle">Accoubts Manager Amix corp</h6>
<div class="row text-center justify-content-md-center">
<div class="col-4"><a href="javascript:void(0)" class="link"><i class="fa fa-user"></i> <font class="font-medium">254</font></a></div>
<div class="col-4"><a href="javascript:void(0)" class="link"><i class="fa fa-image"></i> <font class="font-medium">54</font></a></div>
</div>
</center>
</div>
<div>
<hr/> </div>
<div class="card-body"> <small class="text-muted">Email address </small>
<h6>[email protected]</h6> <small class="text-muted p-t-30 db">Phone</small>
<h6>+91 654 784 547</h6> <small class="text-muted p-t-30 db">Address</small>
<h6>71 Pilgrim Avenue Chevy Chase, MD 20815</h6>
<div class="map-box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d470029.1604841957!2d72.29955005258641!3d23.019996818380896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e848aba5bd449%3A0x4fcedd11614f6516!2sAhmedabad%2C+Gujarat!5e0!3m2!1sen!2sin!4v1493204785508" width="100%" height="150" frameborder="0" style={{/*border:0*/}} allowfullscreen=""></iframe>
</div> <small class="text-muted p-t-30 db">Social Profile</small>
<br/>
<button class="btn btn-circle btn-secondary"><i class="fa fa-facebook"></i></button>
<button class="btn btn-circle btn-secondary"><i class="fa fa-twitter"></i></button>
<button class="btn btn-circle btn-secondary"><i class="fa fa-youtube"></i></button>
</div>
</div>
</div>
<div class="col-lg-4 col-xlg-3 col-md-5">
<div class="card">
<div class="card-body">
<center class="m-t-30"> <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-circle" width="150"/>
<h4 class="card-title m-t-10">John Doe</h4>
<h6 class="card-subtitle">Accoubts Manager Amix corp</h6>
<div class="row text-center justify-content-md-center">
<div class="col-4"><a href="javascript:void(0)" class="link"><i class="fa fa-user"></i> <font class="font-medium">254</font></a></div>
<div class="col-4"><a href="javascript:void(0)" class="link"><i class="fa fa-image"></i> <font class="font-medium">54</font></a></div>
</div>
</center>
</div>
<div>
<hr/> </div>
<div class="card-body"> <small class="text-muted">Email address </small>
<h6>[email protected]</h6> <small class="text-muted p-t-30 db">Phone</small>
<h6>+91 654 784 547</h6> <small class="text-muted p-t-30 db">Address</small>
<h6>71 Pilgrim Avenue Chevy Chase, MD 20815</h6>
<div class="map-box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d470029.1604841957!2d72.29955005258641!3d23.019996818380896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e848aba5bd449%3A0x4fcedd11614f6516!2sAhmedabad%2C+Gujarat!5e0!3m2!1sen!2sin!4v1493204785508" width="100%" height="150" frameborder="0" style={{/*border:0*/}} allowfullscreen=""></iframe>
</div> <small class="text-muted p-t-30 db">Social Profile</small>
<br/>
<button class="btn btn-circle btn-secondary"><i class="fa fa-facebook"></i></button>
<button class="btn btn-circle btn-secondary"><i class="fa fa-twitter"></i></button>
<button class="btn btn-circle btn-secondary"><i class="fa fa-youtube"></i></button>
</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:#eee;
margin-top:20px;
}
html body .m-t-30 {
margin-top: 30px;
}
html body .m-t-10 {
margin-top: 10px;
}
html body .font-medium {
font-weight: 500;
}
.img-circle {
border-radius: 100%;
}
h4 {
line-height: 22px;
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
color: #455a64;
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.card .card-subtitle {
font-weight: 300;
margin-bottom: 15px;
color: #99abb4;
}
a.link {
color: #455a64;
}
.btn-secondary, .btn-secondary.disabled {
-webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
background-color: #ffffff;
color: #67757c;
border-color: #b1b8bb;
}
.btn-circle {
border-radius: 100%;
width: 40px;
height: 40px;
padding: 10px;
}
.btn {
padding: 7px 12px;
cursor: pointer;
}
