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"/>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="mini-stat clearfix bg-facebook rounded">
<span class="mini-stat-icon"><i class="fa fa-facebook fg-facebook"></i></span>
<div class="mini-stat-info">
<span>5,762</span>
Facebook Like
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="mini-stat clearfix bg-twitter rounded">
<span class="mini-stat-icon"><i class="fa fa-twitter fg-twitter"></i></span>
<div class="mini-stat-info">
<span>7,153</span>
Twitter Followers
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="mini-stat clearfix bg-googleplus rounded">
<span class="mini-stat-icon"><i class="fa fa-google-plus fg-googleplus"></i></span>
<div class="mini-stat-info">
<span>793</span>
Google+ Posts
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="mini-stat clearfix bg-bitbucket rounded">
<span class="mini-stat-icon"><i class="fa fa-bitbucket fg-bitbucket"></i></span>
<div class="mini-stat-info">
<span>8,932</span>
Repository
</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;
}
.rounded {
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
border-radius: 3px !important;
}
.mini-stat {
padding: 15px;
margin-bottom: 20px;
}
.mini-stat-icon {
width: 60px;
height: 60px;
display: inline-block;
line-height: 60px;
text-align: center;
font-size: 30px;
background: none repeat scroll 0% 0% #EEE;
border-radius: 100%;
float: left;
margin-right: 10px;
color: #FFF;
}
.mini-stat-info {
font-size: 12px;
padding-top: 2px;
}
span, p {
color: white;
}
.mini-stat-info span {
display: block;
font-size: 30px;
font-weight: 600;
margin-bottom: 5px;
margin-top: 7px;
}
/* ================ colors =====================*/
.bg-facebook {
background-color: #3b5998 !important;
border: 1px solid #3b5998;
color: white;
}
.fg-facebook {
color: #3b5998 !important;
}
.bg-twitter {
background-color: #00a0d1 !important;
border: 1px solid #00a0d1;
color: white;
}
.fg-twitter {
color: #00a0d1 !important;
}
.bg-googleplus {
background-color: #db4a39 !important;
border: 1px solid #db4a39;
color: white;
}
.fg-googleplus {
color: #db4a39 !important;
}
.bg-bitbucket {
background-color: #205081 !important;
border: 1px solid #205081;
color: white;
}
.fg-bitbucket {
color: #205081 !important;
}