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="//cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-4">
<div class="border-bottom text-center pb-4">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="profile" class="img-lg rounded-circle mb-3"/>
<div class="mb-3">
<h3>David Grey. H</h3>
<div class="d-flex align-items-center justify-content-center">
<h5 class="mb-0 mr-2 text-muted">Canada</h5>
<div class="br-wrapper br-theme-css-stars"><select id="profile-rating" name="rating" autocomplete="off" style={{/*display: none;*/}}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><div class="br-widget"><a href="#/" data-rating-value="1" data-rating-text="1" class="br-selected br-current"></a><a href="#/" data-rating-value="2" data-rating-text="2"></a><a href="#/" data-rating-value="3" data-rating-text="3"></a><a href="#/" data-rating-value="4" data-rating-text="4"></a><a href="#/" data-rating-value="5" data-rating-text="5"></a></div></div>
</div>
</div>
<p class="w-75 mx-auto mb-3">Bureau Oberhaeuser is a design bureau focused on Information- and Interface Design. </p>
<div class="d-flex justify-content-center">
<button class="btn btn-success mr-1">Hire Me</button>
<button class="btn btn-success">Follow</button>
</div>
</div>
<div class="border-bottom py-4">
<p>Skills</p>
<div>
<label class="badge badge-outline-dark">Chalk</label>
<label class="badge badge-outline-dark">Hand lettering</label>
<label class="badge badge-outline-dark">Information Design</label>
<label class="badge badge-outline-dark">Graphic Design</label>
<label class="badge badge-outline-dark">Web Design</label>
</div>
</div>
<div class="border-bottom py-4">
<div class="d-flex mb-3">
<div class="progress progress-md flex-grow">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="55" style={{/*width: 55%*/}} aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="d-flex">
<div class="progress progress-md flex-grow">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="75" style={{/*width: 75%*/}} aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="py-4">
<p class="clearfix">
<span class="float-left">
Status
</span>
<span class="float-right text-muted">
Active
</span>
</p>
<p class="clearfix">
<span class="float-left">
Phone
</span>
<span class="float-right text-muted">
006 3435 22
</span>
</p>
<p class="clearfix">
<span class="float-left">
Mail
</span>
<span class="float-right text-muted">
[email protected]
</span>
</p>
<p class="clearfix">
<span class="float-left">
Facebook
</span>
<span class="float-right text-muted">
<a href="#/">David Grey</a>
</span>
</p>
<p class="clearfix">
<span class="float-left">
Twitter
</span>
<span class="float-right text-muted">
<a href="#/">@davidgrey</a>
</span>
</p>
</div>
<button class="btn btn-primary btn-block mb-2">Preview</button>
</div>
<div class="col-lg-8">
<div class="d-block d-md-flex justify-content-between mt-4 mt-md-0">
<div class="text-center mt-4 mt-md-0">
<button class="btn btn-outline-primary">Message</button>
<button class="btn btn-primary">Request</button>
</div>
</div>
<div class="mt-4 py-2 border-top border-bottom">
<ul class="nav profile-navbar">
<li class="nav-item">
<a class="nav-link" href="#/">
<i class="mdi mdi-account-outline"></i>
Info
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#/">
<i class="mdi mdi-newspaper"></i>
Feed
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/">
<i class="mdi mdi-calendar"></i>
Agenda
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/">
<i class="mdi mdi-attachment"></i>
Resume
</a>
</li>
</ul>
</div>
<div class="profile-feed">
<div class="d-flex align-items-start profile-feed-item">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="profile" class="img-sm rounded-circle"/>
<div class="ml-4">
<h6>
Mason Beck
<small class="ml-4 text-muted"><i class="mdi mdi-clock mr-1"></i>10 hours</small>
</h6>
<p>
There is no better advertisement campaign that is low cost and also successful at the same time.
</p>
<p class="small text-muted mt-2 mb-0">
<span>
<i class="mdi mdi-star mr-1"></i>4
</span>
<span class="ml-2">
<i class="mdi mdi-comment mr-1"></i>11
</span>
<span class="ml-2">
<i class="mdi mdi-reply"></i>
</span>
</p>
</div>
</div>
<div class="d-flex align-items-start profile-feed-item">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="profile" class="img-sm rounded-circle"/>
<div class="ml-4">
<h6>
Willie Stanley
<small class="ml-4 text-muted"><i class="mdi mdi-clock mr-1"></i>10 hours</small>
</h6>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="sample" class="rounded mw-100"/>
<p class="small text-muted mt-2 mb-0">
<span>
<i class="mdi mdi-star mr-1"></i>4
</span>
<span class="ml-2">
<i class="mdi mdi-comment mr-1"></i>11
</span>
<span class="ml-2">
<i class="mdi mdi-reply"></i>
</span>
</p>
</div>
</div>
<div class="d-flex align-items-start profile-feed-item">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="profile" class="img-sm rounded-circle"/>
<div class="ml-4">
<h6>
Dylan Silva
<small class="ml-4 text-muted"><i class="mdi mdi-clock mr-1"></i>10 hours</small>
</h6>
<p>
When I first got into the online advertising business, I was looking for the magical combination
that would put my website into the top search engine rankings
</p>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="sample" class="rounded mw-100"/>
<p class="small text-muted mt-2 mb-0">
<span>
<i class="mdi mdi-star mr-1"></i>4
</span>
<span class="ml-2">
<i class="mdi mdi-comment mr-1"></i>11
</span>
<span class="ml-2">
<i class="mdi mdi-reply"></i>
</span>
</p>
</div>
</div>
</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{margin-top:20px;}
body {
color: #6c7293;
}
.profile-navbar .nav-item .nav-link {
color: #6c7293;
}
.profile-navbar .nav-item .nav-link.active {
color: #464dee;
}
.profile-navbar .nav-item .nav-link i {
font-size: 1.25rem;
}
.profile-feed-item {
padding: 1.5rem 0;
border-bottom: 1px solid #e9e9e9;
}
.img-sm {
width: 43px;
height: 43px;
}
