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">
<div class="row">
<div class="col-xl-12">
<div class="card card-lg">
<h6 class="card-header">
This Week
</h6>
<div class="card-body">
<div class="user-activity">
<div class="media">
<div class="media-img-wrap">
<div class="avatar avatar-sm">
<img src="https://www.bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
</div>
<div class="media-body">
<div>
<span class="d-block mb-5"><span class="font-weight-500 text-dark text-capitalize">Laura Thompson</span><span class="pl-5">joined josh groben team.</span></span>
<span class="d-block font-13 mb-30">3 hours ago</span>
</div>
<div class="card d-inline-block w-sm-360p">
<div class="card-body">
<div class="d-flex flex-wrap">
<img class="d-86 rounded mb-15 mr-15" src="https://www.bootdey.com/img/Content/avatar/avatar1.png" alt="thumb"/>
<div class="w-65">
<h6 class="mb-5">Team Josh Groben</h6>
<p>A fan club for josh groben songs</p>
<div class="avatar-group avatar-group-sm avatar-group-overlapped mt-10">
<div class="avatar">
<img src="https://www.bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://www.bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://www.bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://www.bootdey.com/img/Content/avatar/avatar4.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-green rounded-circle"><span class="initial-wrap"><span>87+</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-muted justify-content-between">
<div><span class="text-dark">7,120</span> Members (87 new)</div>
<button class="btn btn-xs btn-primary ml-15 w-sm-100p">join</button>
</div>
</div>
</div>
</div>
<div class="media">
<div class="media-img-wrap">
<div class="avatar avatar-sm">
<img src="https://www.bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
</div>
<div class="media-body">
<div class="d-flex align-items-start">
<div>
<span class="d-block mb-5"><span class="font-weight-500 text-dark text-capitalize">Meayme Fletcher</span><span class="pl-5">liked photos</span></span>
<span class="d-block font-13 mb-30">6 hours ago</span>
</div>
<button class="btn btn-sm btn-primary ml-auto">follow</button>
</div>
<div class="d-flex flex-wrap">
<a href="#/" class="w-sm-150p w-80p mr-10 mb-10">
<img class="img-fluid rounded" src="https://www.bootdey.com/img/Content/avatar/avatar1.png" alt="Card image cap"/>
</a>
<a href="#/" class="w-sm-150p w-80p mr-10 mb-10">
<img class="img-fluid rounded" src="https://www.bootdey.com/img/Content/avatar/avatar2.png" alt="Card image cap"/>
</a>
<a href="#/" class="w-sm-150p w-80p mr-10 mb-10">
<img class="img-fluid rounded" src="https://www.bootdey.com/img/Content/avatar/avatar3.png" alt="Card image cap"/>
</a>
<a href="#/" class="w-sm-150p w-80p mr-10 mb-10">
<img class="img-fluid rounded" src="https://www.bootdey.com/img/Content/avatar/avatar4.png" alt="Card image cap"/>
</a>
</div>
</div>
</div>
<div class="media">
<div class="media-img-wrap">
<div class="avatar avatar-sm">
<img src="https://www.bootdey.com/img/Content/avatar/avatar4.png" alt="user" class="avatar-img rounded-circle"/>
</div>
</div>
<div class="media-body">
<div>
<span class="d-block mb-5"><span class="font-weight-500 text-dark text-capitalize">Billy Flowers</span><span class="pl-5">lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled.</span></span>
<span class="d-block font-13">1 day ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card card-lg">
<h6 class="card-header">
This Month
</h6>
<div class="card-body">
<div class="user-activity">
<div class="media pb-0">
<div class="media-img-wrap">
<div class="avatar avatar-sm">
<img src="https://www.bootdey.com/img/Content/avatar/avatar8.png" alt="user" class="avatar-img rounded-circle"/>
</div>
</div>
<div class="media-body">
<div>
<span class="d-block mb-5"><span class="font-weight-500 text-dark text-capitalize">Morgan Freeman</span><span class="pl-5">Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text.</span> <a href="#/" class="d-block word-break mt-5">https://www.bootdey.com</a></span>
<span class="d-block font-13">32 days ago</span>
</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:#dcdcdc;
}
.avatar.avatar-sm {
font-size: .9rem;
width: 2.625rem;
height: 2.625rem;
}
.avatar {
font-size: 1rem;
position: relative;
display: inline-block;
width: 3.875rem;
height: 3.875rem;
}
.user-activity .media {
position: relative;
padding-bottom: 20px;
margin-left: 20px;
}
.user-activity .media .media-img-wrap {
position: absolute;
left: -20px;
}
.user-activity .media:after {
content: "";
position: absolute;
width: 1px;
height: calc(100% - 77px);
background: #eaecec;
top: 60px;
}
.user-activity .media .media-body {
border-bottom: 1px solid #eaecec;
padding-bottom: 30px;
margin-left: 40px;
min-width: 0;
}
.user-activity .media:last-child .media-body {
border-bottom: none;
}
.user-activity.user-activity-sm .media {
padding-bottom: 10px;
margin-left: 16px;
}
.user-activity.user-activity-sm .media .media-img-wrap {
left: -16px;
}
.user-activity.user-activity-sm .media:after {
height: calc(100% - 47px);
top: 40px;
}
.user-activity.user-activity-sm .media .media-body {
padding-bottom: 10px;
margin-left: 30px;
}
@media (max-width: 576px) {
.user-activity .media .media-body {
margin-left: 35px;
}
}
/*Card*/
.card {
border: none;
box-shadow: none;
margin-bottom: 20px;
}
.card .card-header {
background: transparent;
border: none;
}
.card .card-header.card-header-action {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
}
.card .card-action-wrap a {
color: #6f7a7f;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
transition: 0.2s ease;
}
.card .card-action-wrap a[data-toggle="collapse"] i,
.card .card-action-wrap a[data-toggle="collapse"] span {
font-size: 24px;
}
.card .card-action-wrap a.collapsed span.zmdi-chevron-down:before,
.card .card-action-wrap a.collapsed i.zmdi-chevron-down:before {
content: '\f2fc';
}
.card .card-action-wrap a.card-close i,
.card .card-action-wrap a.card-close span {
font-size: 20px;
}
.card .card-action-wrap a.full-screen i,
.card .card-action-wrap a.full-screen span {
font-size: 18px;
}
.card .card-action-wrap a.dropdown-toggle i,
.card .card-action-wrap a.dropdown-toggle span {
font-size: 23px;
}
.card .card-action-wrap a:hover {
color: #324148;
}
.card .card-text {
margin-bottom: 15px;
}
.card .card-text:last-child {
margin-bottom: 0;
}
.card .card-footer {
background: transparent;
border-color: #eaecec;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.card .card-img-bg {
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.card .card-img-overlay {
position: static;
}
.card.card-refresh {
position: relative;
}
.card.card-refresh .refresh-container {
background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
display: none;
z-index: 5;
cursor: wait;
overflow: hidden;
}
.card.card-refresh .refresh-container .loader-pendulums {
font-size: 2rem;
}
.card.card-refresh > .card-header .card-action-wrap > a.refresh span,
.card.card-refresh > .card-header .card-action-wrap > a.refresh i {
font-size: 21px;
}
.card.fullscreen {
height: 100%;
left: 0;
margin: 0;
position: fixed;
overflow-y: auto;
top: 0;
width: 100%;
z-index: 1040;
}
.card.fullscreen > .card-header .card-action-wrap > a,
.card.fullscreen > .card-header .card-action-wrap .dropdown {
opacity: 0;
visibility: hidden;
}
.card.fullscreen > .card-header .card-action-wrap > a.full-screen,
.card.fullscreen > .card-header .card-action-wrap .dropdown.full-screen {
opacity: 1;
visibility: visible;
}
.card.fullscreen > .card-header .card-action-wrap > a.full-screen i.ion-md-expand::before,
.card.fullscreen > .card-header .card-action-wrap .dropdown.full-screen i.ion-md-expand::before {
content: "\f2d8";
}
.card.card-lg .card-header,
.card.card-lg .card-footer {
padding: .9rem 1.5rem;
}
.card.card-lg .card-body {
padding: 1.5rem;
}
.card.card-sm .card-header,
.card.card-sm .card-footer {
padding: .75rem 1rem;
}
.card.card-sm .card-body {
padding: 1rem;
}
.card.card-flush {
border: 0 !important;
box-shadow: none !important;
}
.card-column-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.card-group > .card {
margin-bottom: 14px;
}
@media (max-width: 576px) {
.card.card-lg .card-header,
.card.card-lg .card-footer {
padding: .75rem 1.25rem;
}
.card.card-lg .card-body {
padding: 1.25rem;
}
}
*Avatar*/
.avatar {
font-size: 1rem;
position: relative;
display: inline-block;
width: 3.875rem;
height: 3.875rem;
}
.avatar.avatar-xl {
font-size: 1.70833rem;
width: 5.125rem;
height: 5.125rem;
}
.avatar.avatar-lg {
font-size: 1.4rem;
width: 4.5rem;
height: 4.5rem;
}
.avatar.avatar-md {
font-size: .95rem;
width: 3.25rem;
height: 3.25rem;
}
.avatar.avatar-sm {
font-size: .9rem;
width: 2.625rem;
height: 2.625rem;
}
.avatar.avatar-xs {
font-size: .6rem;
width: 2rem;
height: 2rem;
}
.avatar .avatar-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.avatar .avatar-text {
display: block;
width: 100%;
height: 100%;
position: relative;
text-transform: uppercase;
overflow: hidden;
background: #fff;
font-weight: 600;
color: #00acf0;
}
.avatar .avatar-text .initial-wrap {
display: table;
width: 100%;
height: 100%;
}
.avatar .avatar-text .initial-wrap > span {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.avatar .avatar-text:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: rgba(178, 230, 250, 0.5);
}
.avatar .avatar-text.avatar-text-cyan,
.avatar .avatar-text.avatar-text-info {
color: #1ebccd;
}
.avatar .avatar-text.avatar-text-cyan:before,
.avatar .avatar-text.avatar-text-info:before {
background: rgba(187, 235, 240, 0.5);
}
.avatar .avatar-text.avatar-text-light {
color: #6f7a7f;
}
.avatar .avatar-text.avatar-text-light:before {
background: rgba(173, 179, 182, 0.5);
}
.avatar .avatar-text.avatar-text-dark {
color: #fff;
}
.avatar .avatar-text.avatar-text-dark:before {
background: #324148 !important;
}
.avatar .avatar-text.avatar-text-sky,
.avatar .avatar-text.avatar-text-primary {
color: #00acf0;
}
.avatar .avatar-text.avatar-text-sky:before,
.avatar .avatar-text.avatar-text-primary:before {
background: rgba(178, 230, 250, 0.5);
}
.avatar .avatar-text.avatar-text-green,
.avatar .avatar-text.avatar-text-success {
color: #22af47;
}
.avatar .avatar-text.avatar-text-green:before,
.avatar .avatar-text.avatar-text-success:before {
background: rgba(188, 231, 199, 0.5);
}
.avatar .avatar-text.avatar-text-red,
.avatar .avatar-text.avatar-text-danger {
color: #f83f37;
}
.avatar .avatar-text.avatar-text-red:before,
.avatar .avatar-text.avatar-text-danger:before {
background: rgba(253, 197, 195, 0.5);
}
.avatar .avatar-text.avatar-text-yellow,
.avatar .avatar-text.avatar-text-warning {
color: #ffbf36;
}
.avatar .avatar-text.avatar-text-yellow:before,
.avatar .avatar-text.avatar-text-warning:before {
background: rgba(255, 236, 194, 0.5);
}
.avatar .avatar-text.avatar-text-pink {
color: #ed1b60;
}
.avatar .avatar-text.avatar-text-pink:before {
background: rgba(250, 186, 207, 0.5);
}
.avatar .avatar-text.avatar-text-purple {
color: #ab26aa;
}
.avatar .avatar-text.avatar-text-purple:before {
background: rgba(230, 189, 229, 0.5);
}
.avatar .avatar-text.avatar-text-violet {
color: #6640b2;
}
.avatar .avatar-text.avatar-text-violet:before {
background: rgba(209, 197, 232, 0.5);
}
.avatar .avatar-text.avatar-text-indigo {
color: #3a55b1;
}
.avatar .avatar-text.avatar-text-indigo:before {
background: rgba(196, 204, 231, 0.5);
}
.avatar .avatar-text.avatar-text-blue {
color: #0092ee;
}
.avatar .avatar-text.avatar-text-blue:before {
background: rgba(178, 222, 250, 0.5);
}
.avatar .avatar-text.avatar-text-teal {
color: #009b84;
}
.avatar .avatar-text.avatar-text-teal:before {
background: rgba(178, 225, 218, 0.5);
}
.avatar .avatar-text.avatar-text-neon {
color: #88c241;
}
.avatar .avatar-text.avatar-text-neon:before {
background: rgba(219, 237, 198, 0.5);
}
.avatar .avatar-text.avatar-text-lime {
color: #d0d962;
}
.avatar .avatar-text.avatar-text-lime:before {
background: rgba(241, 244, 208, 0.5);
}
.avatar .avatar-text.avatar-text-sun {
color: #fde335;
}
.avatar .avatar-text.avatar-text-sun:before {
background: rgba(254, 247, 194, 0.5);
}
.avatar .avatar-text.avatar-text-orange {
color: #ff9528;
}
.avatar .avatar-text.avatar-text-orange:before {
background: rgba(255, 223, 190, 0.5);
}
.avatar .avatar-text.avatar-text-pumpkin {
color: #ff6028;
}
.avatar .avatar-text.avatar-text-pumpkin:before {
background: rgba(255, 207, 190, 0.5);
}
.avatar .avatar-text.avatar-text-brown {
color: #7a5449;
}
.avatar .avatar-text.avatar-text-brown:before {
background: rgba(215, 203, 200, 0.5);
}
.avatar .avatar-text.avatar-text-gold {
color: #c1993f;
}
.avatar .avatar-text.avatar-text-gold:before {
background: rgba(236, 224, 197, 0.5);
}
.avatar .avatar-text.avatar-text-grey,
.avatar .avatar-text.avatar-text-secondary {
color: #9e9e9e;
}
.avatar .avatar-text.avatar-text-grey:before,
.avatar .avatar-text.avatar-text-secondary:before {
background: rgba(226, 226, 226, 0.5);
}
.avatar .avatar-text.avatar-text-inv-cyan,
.avatar .avatar-text.avatar-text-inv-info {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-cyan:before,
.avatar .avatar-text.avatar-text-inv-info:before {
background-color: #1ebccd !important;
}
.avatar .avatar-text.avatar-text-inv-sky,
.avatar .avatar-text.avatar-text-inv-primary {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-sky:before,
.avatar .avatar-text.avatar-text-inv-primary:before {
background-color: #00acf0 !important;
}
.avatar .avatar-text.avatar-text-inv-green,
.avatar .avatar-text.avatar-text-inv-success {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-green:before,
.avatar .avatar-text.avatar-text-inv-success:before {
background-color: #22af47 !important;
}
.avatar .avatar-text.avatar-text-inv-red,
.avatar .avatar-text.avatar-text-inv-danger {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-red:before,
.avatar .avatar-text.avatar-text-inv-danger:before {
background-color: #f83f37 !important;
}
.avatar .avatar-text.avatar-text-inv-yellow,
.avatar .avatar-text.avatar-text-inv-warning {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-yellow:before,
.avatar .avatar-text.avatar-text-inv-warning:before {
background-color: #ffbf36 !important;
}
.avatar .avatar-text.avatar-text-inv-pink {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-pink:before {
background-color: #ed1b60 !important;
}
.avatar .avatar-text.avatar-text-inv-purple {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-purple:before {
background-color: #ab26aa !important;
}
.avatar .avatar-text.avatar-text-inv-violet {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-violet:before {
background-color: #6640b2 !important;
}
.avatar .avatar-text.avatar-text-inv-indigo {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-indigo:before {
background-color: #3a55b1 !important;
}
.avatar .avatar-text.avatar-text-inv-blue {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-blue:before {
background-color: #0092ee !important;
}
.avatar .avatar-text.avatar-text-inv-teal {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-teal:before {
background-color: #009b84 !important;
}
.avatar .avatar-text.avatar-text-inv-neon {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-neon:before {
background-color: #88c241 !important;
}
.avatar .avatar-text.avatar-text-inv-lime {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-lime:before {
background-color: #d0d962 !important;
}
.avatar .avatar-text.avatar-text-inv-sun {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-sun:before {
background-color: #fde335 !important;
}
.avatar .avatar-text.avatar-text-inv-orange {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-orange:before {
background-color: #ff9528 !important;
}
.avatar .avatar-text.avatar-text-inv-pumpkin {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-pumpkin:before {
background-color: #ff6028 !important;
}
.avatar .avatar-text.avatar-text-inv-brown {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-brown:before {
background-color: #7a5449 !important;
}
.avatar .avatar-text.avatar-text-inv-gold {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-gold:before {
background-color: #c1993f !important;
}
.avatar .avatar-text.avatar-text-inv-grey,
.avatar .avatar-text.avatar-text-inv-secondary {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-grey:before,
.avatar .avatar-text.avatar-text-inv-secondary:before {
background-color: #9e9e9e !important;
}
.avatar-group {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.avatar-group .avatar {
font-size: .9rem;
width: 2.625rem;
height: 2.625rem;
}
.avatar-group .avatar .avatar-img,
.avatar-group .avatar .avatar-text {
border: 2px solid #fff;
}
.avatar-group.avatar-group-overlapped .avatar {
margin-right: -13px;
}
.avatar-group.avatar-group-overlapped .avatar:hover {
z-index: 1;
}
.avatar-group.avatar-group-lg .avatar {
font-size: .95rem;
width: 3.25rem;
height: 3.25rem;
}
.avatar-group.avatar-group-lg.avatar-group-overlapped .avatar {
margin-right: -15px;
}
.avatar-group.avatar-group-sm .avatar {
font-size: .6rem;
width: 2rem;
height: 2rem;
}
.avatar-group.avatar-group-sm.avatar-group-overlapped .avatar {
margin-right: -10px;
}
.w-sm-150p {
width: 150px !important; }
.line-height-10 {
line-height: 1 !important;
}
.font-12 {
font-size: 12px !important;
}
.w-80p {
width: 80px !important;
}
.mr-10 {
margin-right: 10px !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.d-86 {
height: 86px !important;
width: 86px !important;
}
.rounded {
border-radius: 4px !important;
}
.mr-15 {
margin-right: 15px !important;
}
.mb-15 {
margin-bottom: 15px !important;
}
.font-weight-500 {
font-weight: 500 !important;
}
.text-dark {
color: #324148 !important;
}
