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 start
2. 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 again
3. 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"/>
<section class="followers">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="followers-box full-width">
<div class="followers-list">
<div class="followers-body">
<img class="img-responsive img-circle" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""/>
<div class="name-box">
<h4>Vanessa Wells</h4>
<span>@vannessa</span>
<div class="followers-base">
<ul class="list-group">
<li class="list-group-item full-width">
<div class="pull-left" style={{/*margin-right: 20px;*/}}>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Followers </span>
</div>
</li>
<li class="list-group-item full-width">
<div class="pull-left">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Following </span>
</div>
</li>
</ul>
</div>
</div>
<span><a href="" class="btn btn-info btn-sm"> Follow</a></span>
</div>
<div class="followers-body">
<img class="img-responsive img-circle" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt=""/>
<div class="name-box">
<h4>Anthony McCartney</h4>
<span>@antony</span>
<div class="followers-base">
<ul class="list-group">
<li class="list-group-item full-width">
<div class="pull-left" style={{/*margin-right: 20px;*/}}>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Followers </span>
</div>
</li>
<li class="list-group-item full-width">
<div class="pull-left">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Following </span>
</div>
</li>
</ul>
</div>
</div>
<span><a href="" class="btn btn-info btn-sm"> Follow</a></span>
</div>
<div class="followers-body">
<img class="img-responsive img-circle" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt=""/>
<div class="name-box">
<h4>Anna Morgan</h4>
<span>@anna</span>
<div class="followers-base">
<ul class="list-group">
<li class="list-group-item full-width">
<div class="pull-left" style={{/*margin-right: 20px;*/}}>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Followers </span>
</div>
</li>
<li class="list-group-item full-width">
<div class="pull-left">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Following </span>
</div>
</li>
</ul>
</div>
</div>
<span><a href="" class="btn btn-info btn-sm"> Follow</a></span>
</div>
<div class="followers-body">
<img class="img-responsive img-circle" src="https://bootdey.com/img/Content/avatar/avatar4.png" alt=""/>
<div class="name-box">
<h4>Sean Coleman</h4>
<span>@sean</span>
<div class="followers-base">
<ul class="list-group">
<li class="list-group-item full-width">
<div class="pull-left" style={{/*margin-right: 20px;*/}}>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Followers </span>
</div>
</li>
<li class="list-group-item full-width">
<div class="pull-left">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Following </span>
</div>
</li>
</ul>
</div>
</div>
<span><a href="" class="btn btn-info btn-sm"> Follow</a></span>
</div>
<div class="followers-body">
<img class="img-responsive img-circle" src="https://bootdey.com/img/Content/avatar/avatar5.png" alt=""/>
<div class="name-box">
<h4>Grace Karen</h4>
<span>@grace</span>
<div class="followers-base">
<ul class="list-group">
<li class="list-group-item full-width">
<div class="pull-left" style={{/*margin-right: 20px;*/}}>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Followers </span>
</div>
</li>
<li class="list-group-item full-width">
<div class="pull-left">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Following </span>
</div>
</li>
</ul>
</div>
</div>
<span><a href="" class="btn btn-info btn-sm"> Follow</a></span>
</div>
<div class="followers-body">
<img class="img-responsive img-circle" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""/>
<div class="name-box">
<h4>Clifford Graham</h4>
<span>@clifford</span>
<div class="followers-base">
<ul class="list-group">
<li class="list-group-item full-width">
<div class="pull-left" style={{/*margin-right: 20px;*/}}>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Followers </span>
</div>
</li>
<li class="list-group-item full-width">
<div class="pull-left">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Following </span>
</div>
</li>
</ul>
</div>
</div>
<span><a href="" class="btn btn-info btn-sm"> Follow</a></span>
</div>
<div class="followers-body">
<img class="img-responsive img-circle" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt=""/>
<div class="name-box">
<h4>Eleanor Harper</h4>
<span>@eleanor</span>
<div class="followers-base">
<ul class="list-group">
<li class="list-group-item full-width">
<div class="pull-left" style={{/*margin-right: 20px;*/}}>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
<span> 14,000 Followers </span>
</div>
</li>
<li class="list-group-item full-width">
<div class="pull-left">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-circle max-w-40 "/>
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-circle max-w-40 "/>
<button class="btn btn-add-gray">
<i class="fa fa-plus"></i>
</button>
</div>
</li>
</ul>
</div>
</div>
<span><a href="" class="btn btn-info btn-sm"> Follow</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
.followers{
background: #f4f4f4;
padding: 20px 0px 20px 0px;
}
.followers-box {
float: left;
width: 100%;
background-color: #fff;
margin-bottom: 20px;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 5px 25px 0 rgba(123,123,123,.15);
}
.followers-box .followers-list {
float: left;
width: 100%;
padding: 17px 0 10px 0;
}
.followers-box .followers-body {
float: left;
width: 100%;
padding: 10px 20px 0px 20px;
margin-top: 10px;
border-bottom: 2px solid #f4f4f4;
}
.followers-box .followers-body:last-child {
border-bottom: none;
}
.followers-box .followers-body img {
width: 37px;
height: 37px;
float: left;
padding: 2px;
border: 2px solid #f4f4f4;
}
.followers-box .name-box {
float: left;
padding-left: 10px;
position: relative;
top: -12px;
padding-top: 0px !important;
}
.followers-box .name-box h4 {
font-family: 'Abhaya Libre', serif;
color: #88898a;
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
.followers-box .name-box span {
font-family: 'Abhaya Libre', serif;
font-size: 14px;
color: #aaa;
}
.followers-box .followers-body> span {
float: right;
margin-top: 4px;
position: relative;
top: -12px;
}
.followers-base ul{
font-size: 0px;
text-align: center;
}
.followers-base li {
list-style: none;
display: inline-block;
}
.followers-base li a{
margin: 0px !important;
padding: 0px !important;
}
.followers-box .followers-body > span a{
font-family: 'Abhaya Libre', serif;
font-size: 14px;
}
.followers-box .followers-body .list-group .list-group-item {
font-size: .8125em;
margin: 0;
padding: 5px 10px;
color: #607188;
background-color: transparent;
overflow: hidden;
border: 0;
border-radius: 0;
}
.followers-box .followers-body .list-group-item img {
margin-left: -13px;
border: 2px solid #fff;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.1) 1px 1px rgba(0,0,0,.1);
-khtml-box-shadow: 0 5px 10px rgba(0,0,0,.1) 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.1) 1px 1px rgba(0,0,0,.1);
-ms-box-shadow: 0 5px 10px rgba(0,0,0,.1) 1px 1px rgba(0,0,0,.1);
-o-box-shadow: 0 5px 10px rgba(0,0,0,.1) 1px 1px rgba(0,0,0,.1);
box-shadow: 0 5px 10px rgba(0,0,0,.1) 1px 1px rgba(0,0,0,.1);
max-width: 40px !important;
}
.followers-box .followers-body .list-group .list-group-item span{
font-family: 'Abhaya Libre', serif;
font-size: 14px;
margin-left: 5px;
}
.btn-add-gray{
border-radius: 50%;
background: transparent;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
border: 2px dashed #8f9eb5;
color: #8f9eb5 !important;
margin-left: 5px !important;
}
@media (max-width: 768px){
.followers-box .followers-body> span {
float: left !important;
margin-top: 0px !important;
}
.followers-box .followers-body> span .kafe-btn-mint-small{
width: 100% !important;
}
}
.img-circle {
border-radius: 50%;
}
.btn-add-gray {
border-radius: 50%;
background: transparent;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
border: 2px dashed #8f9eb5;
color: #8f9eb5 !important;
margin-left: 5px !important;
}