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 db-social">
<div class="jumbotron jumbotron-fluid"></div>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-xl-11">
<div class="widget head-profile has-shadow">
<div class="widget-body pb-0">
<div class="row d-flex align-items-center">
<div class="col-xl-4 col-md-4 d-flex justify-content-lg-start justify-content-md-start justify-content-center">
<ul>
<li>
<div class="counter">246</div>
<div class="heading">Friends</div>
</li>
<li>
<div class="counter">30</div>
<div class="heading">Online</div>
</li>
<li>
<div class="counter">216</div>
<div class="heading">Offline</div>
</li>
</ul>
</div>
<div class="col-xl-4 col-md-4 d-flex justify-content-center">
<div class="image-default">
<img class="rounded-circle" src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="..."/>
</div>
<div class="infos">
<h2>David Green</h2>
<div class="location">Las Vegas, Nevada, U.S.</div>
</div>
</div>
<div class="col-xl-4 col-md-4 d-flex justify-content-lg-end justify-content-md-end justify-content-center">
<div class="follow">
<a class="btn btn-shadow" href="#/"><i class="la la-user-plus"></i>Add Friend</a>
<div class="actions dark">
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
<i class="la la-ellipsis-h"></i>
</button>
<div class="dropdown-menu" x-placement="bottom-start" style={{/*display: none; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 35px, 0px);*/}}>
<a href="#/" class="dropdown-item">
Report
</a>
<a href="#/" class="dropdown-item">
Block
</a>
</div>
</div>
</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;
background:#eee;
}
.db-social .jumbotron {
margin: 0;
background: url(https://bootdey.com/img/Content/flores-amarillas-wallpaper.jpeg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: bottom center;
color: #fff!important;
height: 300px;
position: relative;
box-shadow: inset 0 0 20px rgba(0,0,0,.3);
padding: 0;
}
.container-fluid {
padding: 30px 30px;
}
.db-social .head-profile {
margin-top: -120px;
border-radius: 4px;
position: relative;
}
.widget {
background: #fff;
border-radius: 0;
border: none;
margin-bottom: 30px;
}
.has-shadow {
box-shadow: 0 1px 15px 1px rgba(52,40,104,.08);
}
.db-social .head-profile:before {
content: "";
background: rgba(255,255,255,.6);
height: 20px;
width: 90%;
position: absolute;
top: -20px;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 4px 4px 0 0;
}
.db-social .head-profile:after {
content: "";
background: rgba(255,255,255,.3);
height: 20px;
width: 80%;
position: absolute;
top: -40px;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 4px 4px 0 0;
}
.db-social .widget-body {
padding: 1rem 1.4rem;
}
.widget-body {
padding: 1.4rem;
}
.pb-0, .py-0 {
padding-bottom: 0!important;
}
.db-social .image-default img {
width: 120px;
position: absolute;
top: -80px;
left: 0;
right: 0;
margin: 0 auto;
box-shadow: 0 0 0 6px rgba(255,255,255,1);
z-index: 10;
}
.db-social .infos {
text-align: center;
margin-top: 4rem;
margin-bottom: 1rem;
line-height: 1.8rem;
}
.db-social h2 {
color: #2c304d;
font-size: 1.6rem;
font-weight: 600;
margin-bottom: .2rem;
}
.db-social .location {
color: #aea9c3;
font-size: 1rem;
}
.db-social .follow .btn {
padding: 10px 30px;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.btn-shadow, .btn-shadow a {
color: #5d5386;
background-color: #fff;
border-color: #fff;
box-shadow: 0 1px 15px 1px rgba(52,40,104,.15);
}
.db-social .head-profile .actions {
display: inline-block;
vertical-align: middle;
margin-left: .5rem;
}
.actions {
z-index: 999;
display: block;
}
.actions.dark .dropdown-toggle {
color: #2c304d;
}
.actions .dropdown-toggle {
color: #98a8b4;
background: none;
border: none;
padding: 0;
font-size: 1.7rem;
}
.actions .dropdown-menu {
border: none;
min-width: auto;
font-size: 1rem;
border-radius: 4px;
padding: 1.4rem 1.8rem;
text-align: left;
box-shadow: 1px 1px 30px rgba(0,0,0,.15);
}
.actions .dropdown-menu .dropdown-item {
padding: .5rem 0;
}
.actions .dropdown-menu a {
color: #2c304d;
font-weight: 500;
}
.db-social .head-profile li:first-child {
padding-left: 0;
}
.db-social .head-profile li {
display: inline-block;
text-align: center;
padding: 0 1rem;
}
.db-social .head-profile li .counter {
color: #2c304d;
font-size: 1.4rem;
font-weight: 600;
}
.db-social .head-profile li .heading {
color: #aea9c3;
font-size: 1rem;
}
