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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
<div class="container">
<div class="row mt-n5">
<div class="col-md-6 col-lg-4 mt-5 wow fadeInUp" data-wow-delay=".2s" style={{/*visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;*/}}>
<div class="blog-grid">
<div class="blog-grid-img position-relative"><img alt="img" src="https://www.bootdey.com/image/480x480/00FFFF/000000"/></div>
<div class="blog-grid-text p-4">
<h3 class="h5 mb-3"><a href="#!">Business tool for your customer</a></h3>
<p class="display-30">Exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<div class="meta meta-style2">
<ul>
<li><a href="#!"><i class="fas fa-calendar-alt"></i> 10 Jul, <script>document.write(new Date().getFullYear())</script>2022</a></li>
<li><a href="#!"><i class="fas fa-user"></i> User</a></li>
<li><a href="#!"><i class="fas fa-comments"></i> 38</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-5 wow fadeInUp" data-wow-delay=".4s" style={{/*visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;*/}}>
<div class="blog-grid">
<div class="blog-grid-img position-relative"><img alt="img" src="https://www.bootdey.com/image/480x480/00FFFF/000000"/></div>
<div class="blog-grid-text p-4">
<h3 class="h5 mb-3"><a href="#!">Growth your business strategy</a></h3>
<p class="display-30">Exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<div class="meta meta-style2">
<ul>
<li><a href="#!"><i class="fas fa-calendar-alt"></i> 25 Jun, <script>document.write(new Date().getFullYear())</script>2022</a></li>
<li><a href="#!"><i class="fas fa-user"></i> User</a></li>
<li><a href="#!"><i class="fas fa-comments"></i> 68</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-5 wow fadeInUp" data-wow-delay=".6s" style={{/*visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;*/}}>
<div class="blog-grid">
<div class="blog-grid-img position-relative"><img alt="img" src="https://www.bootdey.com/image/480x480/00FFFF/000000"/></div>
<div class="blog-grid-text p-4">
<h3 class="h5 mb-3"><a href="#!">Business people success master plan</a></h3>
<p class="display-30">Exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<div class="meta meta-style2">
<ul>
<li><a href="#!"><i class="fas fa-calendar-alt"></i> 16 May, <script>document.write(new Date().getFullYear())</script>2022</a></li>
<li><a href="#!"><i class="fas fa-user"></i> User</a></li>
<li><a href="#!"><i class="fas fa-comments"></i> 58</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-5 wow fadeInUp" data-wow-delay=".8s" style={{/*visibility: visible; animation-delay: 0.8s; animation-name: fadeInUp;*/}}>
<div class="blog-grid">
<div class="blog-grid-img position-relative"><img alt="img" src="https://www.bootdey.com/image/480x480/00FFFF/000000"/></div>
<div class="blog-grid-text p-4">
<h3 class="h5 mb-3"><a href="#!">Results professional report</a></h3>
<p class="display-30">Exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<div class="meta meta-style2">
<ul>
<li><a href="#!"><i class="fas fa-calendar-alt"></i> 02 Apr, <script>document.write(new Date().getFullYear())</script>2022</a></li>
<li><a href="#!"><i class="fas fa-user"></i> User</a></li>
<li><a href="#!"><i class="fas fa-comments"></i> 38</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-5 wow fadeInUp" data-wow-delay="1s" style={{/*visibility: visible; animation-delay: 1s; animation-name: fadeInUp;*/}}>
<div class="blog-grid">
<div class="blog-grid-img position-relative"><img alt="img" src="https://www.bootdey.com/image/480x480/00FFFF/000000"/></div>
<div class="blog-grid-text p-4">
<h3 class="h5 mb-3"><a href="#!">Business strategy concept</a></h3>
<p class="display-30">Exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<div class="meta meta-style2">
<ul>
<li><a href="#!"><i class="fas fa-calendar-alt"></i> 25 Mar, <script>document.write(new Date().getFullYear())</script>2022</a></li>
<li><a href="#!"><i class="fas fa-user"></i> User</a></li>
<li><a href="#!"><i class="fas fa-comments"></i> 68</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mt-5 wow fadeInUp" data-wow-delay="1.2s" style={{/*visibility: visible; animation-delay: 1.2s; animation-name: fadeInUp;*/}}>
<div class="blog-grid">
<div class="blog-grid-img position-relative"><img alt="img" src="https://www.bootdey.com/image/480x480/00FFFF/000000"/></div>
<div class="blog-grid-text p-4">
<h3 class="h5 mb-3"><a href="#!">Business people meeting</a></h3>
<p class="display-30">Exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<div class="meta meta-style2">
<ul>
<li><a href="#!"><i class="fas fa-calendar-alt"></i> 10 Feb, <script>document.write(new Date().getFullYear())</script>2022</a></li>
<li><a href="#!"><i class="fas fa-user"></i> User</a></li>
<li><a href="#!"><i class="fas fa-comments"></i> 58</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-6 wow fadeInUp" data-wow-delay=".6s" style={{/*visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;*/}}>
<div class="col-12">
<div class="pagination text-small text-uppercase text-extra-dark-gray">
<ul>
<li><a href="#!"><i class="fas fa-long-arrow-alt-left me-1 d-none d-sm-inline-block"></i> Prev</a></li>
<li class="active"><a href="#!">1</a></li>
<li><a href="#!">2</a></li>
<li><a href="#!">3</a></li>
<li><a href="#!">Next <i class="fas fa-long-arrow-alt-right ms-1 d-none d-sm-inline-block"></i></a></li>
</ul>
</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;}
.blog-grid {
position: relative;
box-shadow: 0 1rem 1.75rem 0 rgba(45, 55, 75, 0.1);
height: 100%;
border: 0.0625rem solid rgba(220, 224, 229, 0.6);
border-radius: 0.25rem;
transition: all .2s ease-in-out;
height: 100%
}
.blog-grid span {
color: #292dc2
}
.blog-grid img {
width: 100%;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem
}
.blog-grid-text {
position: relative
}
.blog-grid-text>span {
color: #292dc2;
font-size: 13px;
padding-right: 5px
}
.blog-grid-text h4 {
line-height: normal;
margin-bottom: 15px
}
.blog-grid-text .meta-style2 {
border-top: 1px dashed #cee1f8;
padding-top: 15px
}
.blog-grid-text .meta-style2 ul li {
margin-bottom: 0;
font-weight: 500
}
.blog-grid-text .meta-style2 ul li:last-child {
margin-right: 0
}
.blog-grid-text ul {
margin: 0;
padding: 0
}
.blog-grid-text ul li {
display: inline-block;
font-size: 14px;
font-weight: 500;
margin: 5px 10px 5px 0
}
.blog-grid-text ul li:last-child {
margin-right: 0
}
.blog-grid-text ul li i {
font-size: 14px;
font-weight: 600;
margin-right: 5px
}
.blog-grid-text p {
font-weight: 400;
padding: 0
}
.blog-list-left-heading:after,
.blog-title-box:after {
content: '';
height: 2px
}
.blog-grid-simple-content a:hover {
color: #1d184a
}
.blog-grid-simple-content a:hover:after {
color: #1d184a
}
.blog-grid-text {
position: relative
}
.blog-grid-text>span {
color: #292dc2;
font-size: 13px;
padding-right: 5px
}
.blog-grid-text h4 {
line-height: normal;
margin-bottom: 15px
}
.blog-grid-text .meta-style2 {
border-top: 1px dashed #cee1f8 !important;
padding-top: 15px
}
.blog-grid-text .meta-style2 ul li {
margin-bottom: 0;
font-weight: 500
}
.blog-grid-text .meta-style2 ul li:last-child {
margin-right: 0
}
.blog-grid-text ul {
margin: 0;
padding: 0
}
.blog-grid-text ul li {
display: inline-block;
font-size: 14px;
font-weight: 500;
margin: 5px 10px 5px 0
}
.blog-grid-text ul li:last-child {
margin-right: 0
}
.blog-grid-text ul li i {
font-size: 14px;
font-weight: 600;
margin-right: 5px
}
.blog-grid-text p {
font-weight: 400;
padding: 0
}
a, a:active, a:focus {
color: #575a7b;
text-decoration: none;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-duration: .2s;
-ms-transition-duration: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
}
.pagination {
border-radius: 0;
padding: 0;
margin: 0
}
.pagination ul {
display: inline-block;
*display: inline;
*zoom: 1;
margin: 0 auto;
padding: 0
}
.pagination li {
display: inline
}
.pagination a {
float: left;
padding: 0 18px;
line-height: 40px;
text-decoration: none;
border: 1px solid #dbdbdb;
border-left-width: 0;
background: #fff
}
.pagination a:hover {
background-color: #1d184a;
color: #fff
}
.pagination .active a {
background-color: #f7f7f7;
color: #999;
cursor: default
}
.pagination .disabled span {
color: #999;
background-color: transparent;
cursor: default
}
.pagination .disabled a {
color: #999;
background-color: transparent;
cursor: default
}
.pagination .disabled a:hover {
color: #999;
background-color: transparent;
cursor: default
}
.pagination li:first-child a {
border-left-width: 1px
}
.mt-6, .my-6 {
margin-top: 3.5rem;
}
