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>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-md-6">
<h2>Blockquote Box</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="blockquote-box blockquote-primary clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-home glyphicon-lg"></span>
</div>
<h4>
Bootdey.com</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
<div class="blockquote-box blockquote-primary clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-music glyphicon-lg"></span>
</div>
<h4>
Let's music play</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. <a href="http://www.jquery2dotnet.com/search/label/jquery">jquery2dotnet</a>
</p>
</div>
<div class="blockquote-box blockquote-success clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-tree-conifer glyphicon-lg"></span>
</div>
<h4>
Tree conifer</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="col-md-6">
<div class="blockquote-box blockquote-info clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-info-sign glyphicon-lg"></span>
</div>
<h4>
Information</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
<div class="blockquote-box blockquote-warning clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-warning-sign glyphicon-lg"></span>
</div>
<h4>
Warning</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
<div class="blockquote-box blockquote-danger clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-record glyphicon-lg"></span>
</div>
<h4>
Danger</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</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 :
body {
background: #eee;
}
.glyphicon-lg {
font-size: 3em
}
.blockquote-box {
border-right: 5px solid #E6E6E6;
margin-bottom: 25px
}
.blockquote-box .square {
width: 100px;
min-height: 50px;
margin-right: 22px;
text-align: center !important;
background-color: #E6E6E6;
padding: 20px 0
}
.blockquote-box.blockquote-primary {
border-color: #357EBD
}
.blockquote-box.blockquote-primary .square {
background-color: #428BCA;
color: #FFF
}
.blockquote-box.blockquote-success {
border-color: #4CAE4C
}
.blockquote-box.blockquote-success .square {
background-color: #5CB85C;
color: #FFF
}
.blockquote-box.blockquote-info {
border-color: #46B8DA
}
.blockquote-box.blockquote-info .square {
background-color: #5BC0DE;
color: #FFF
}
.blockquote-box.blockquote-warning {
border-color: #EEA236
}
.blockquote-box.blockquote-warning .square {
background-color: #F0AD4E;
color: #FFF
}
.blockquote-box.blockquote-danger {
border-color: #D43F3A
}
.blockquote-box.blockquote-danger .square {
background-color: #D9534F;
color: #FFF
}