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="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<div class="row margin-bottom-10">
<div class="col-md-4 col-sm-6">
<div class="servive-block servive-block-grey">
<i class="icon-2x color-light fa fa-bell-o"></i>
<h2 class="heading-md">Grey Box</h2>
<p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="servive-block servive-block-yellow">
<i class="icon-2x color-light fa fa-envelope"></i>
<h2 class="heading-md">Yellow Box</h2>
<p>Donec id elit non mi porta gravida at eget metus id elit mi egetine usce dapibus elit nondapibus</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="servive-block servive-block-dark-blue">
<i class="icon-2x color-light fa fa-gift"></i>
<h2 class="heading-md">Dark Blue Box</h2>
<p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus</p>
</div>
</div>
</div>
<div class="row margin-bottom-10">
<div class="col-sm-6">
<div class="servive-block servive-block-purple">
<i class="icon-2x color-light fa fa-globe"></i>
<h2 class="heading-md">Purple Box</h2>
<p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus. At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p>
</div>
</div>
<div class="col-sm-6">
<div class="servive-block rounded servive-block-aqua">
<i class="icon-2x color-light fa fa-taxi"></i>
<h2 class="heading-md">Aqua Box</h2>
<p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus. At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p>
</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 :
i.icon-2x {
font-size: 30px;
}
.color-light{
color:#FFFFFF;
}
/*Colored Content Boxes
------------------------------------*/
.servive-block {
padding: 20px 30px;
text-align: center;
margin-bottom: 20px;
}
.servive-block p,
.servive-block h2 {
color: #fff;
}
.servive-block h2 a:hover{
text-decoration: none;
}
.servive-block-light,
.servive-block-default {
background: #fafafa;
border: solid 1px #eee;
}
.servive-block-default:hover {
box-shadow: 0 0 8px #eee;
}
.servive-block-light p,
.servive-block-light h2,
.servive-block-default p,
.servive-block-default h2 {
color: #555;
}
.servive-block-u {
background: #72c02c;
}
.servive-block-blue {
background: #3498db;
}
.servive-block-red {
background: #e74c3c;
}
.servive-block-sea {
background: #1abc9c;
}
.servive-block-grey {
background: #95a5a6;
}
.servive-block-yellow {
background: #f1c40f;
}
.servive-block-orange {
background: #e67e22;
}
.servive-block-green {
background: #2ecc71;
}
.servive-block-purple {
background: #9b6bcc;
}
.servive-block-aqua {
background: #27d7e7;
}
.servive-block-brown {
background: #9c8061;
}
.servive-block-dark-blue {
background: #4765a0;
}
.servive-block-light-green {
background: #79d5b3;
}
.servive-block-dark {
background: #555;
}
.servive-block-light {
background: #ecf0f1;
}