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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha512-Zq2BOxyhvnRFXu0+WE6ojpZLOU2jdnqbrM1hmVdGzyeCa1DgM3X5Q4A/Is9xA1IkbUeDd7755dNNI/PzSf2Pew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<ul class="col container-filter portfolioFilte list-unstyled mb-0" id="filter">
<li><a class="categories active" data-filter="*">All</a></li>
<li><a class="categories" data-filter=".branding">Branding</a></li>
<li><a class="categories" data-filter=".design">Design</a></li>
<li><a class="categories" data-filter=".photo">Photo</a></li>
<li><a class="categories" data-filter=".coffee">coffee</a></li>
</ul>
</div>
</div>
</div>
<div class="port portfolio-masonry mt-4">
<div class="portfolioContainer row photo">
<div class="col-lg-4 p-4 ">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/00FFFF/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Branding</p>
<h6 class="text-dark mt-1 text-uppercase">Nonsensical content</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 branding coffee">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/7FFF00/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Coffee</p>
<h6 class="text-dark mt-1 text-uppercase">PageMaker including</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 branding photo">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/FF8C00/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Lebles</p>
<h6 class="text-dark mt-1 text-uppercase">Sometime Active</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 branding design photo">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/FF1493/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Card</p>
<h6 class="text-dark mt-1 text-uppercase">Therefore Always</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 design photo">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/9400D3/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Pepers</p>
<h6 class="text-dark mt-1 text-uppercase">Therefore Always</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 branding design coffee">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/20B2AA/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Bottle</p>
<h6 class="text-dark mt-1 text-uppercase">Therefore Always</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 branding design">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/FF4500/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Watch</p>
<h6 class="text-dark mt-1 text-uppercase">Sometime Active</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 branding design photo coffee">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/EE82EE/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Milk</p>
<h6 class="text-dark mt-1 text-uppercase">Sometime Active</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 p-4 branding design photo coffee">
<div class="item-box">
<a class="mfp-image" href="#/" title="Project Name">
<img class="item-container img-fluid" src="https://www.bootdey.com/image/800x540/FF00FF/000000" alt="work-img"/>
<div class="item-mask">
<div class="item-caption">
<p class="text-dark mb-0">Milk</p>
<h6 class="text-dark mt-1 text-uppercase">Sometime Active</h6>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</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;}
.container-filter {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 30px;
padding: 0;
text-align: center;
}
.container-filter li {
list-style: none;
display: inline-block;
}
.container-filter a {
display: block;
font-size: 14px;
margin: 10px 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 400;
line-height: 30px;
-webkit-transition: all 0.6s;
border-bottom: 1px solid transparent;
color: #807c7c !important;
}
.container-filter a:hover {
color: #222222 !important;
}
.container-filter a.active {
color: #222222 !important;
border-bottom: 1px solid #222222;
}
.item-box {
position: relative;
overflow: hidden;
display: block;
}
.item-box a {
display: inline-block;
}
.item-box .item-mask {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
position: absolute;
transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
}
.item-box .item-mask .item-caption {
position: absolute;
width: 100%;
bottom: 10px;
opacity: 0;
}
.item-box:hover .item-mask {
opacity: 1;
visibility: visible;
cursor: pointer !important;
}
.item-box:hover .item-caption {
opacity: 1;
}
.item-box:hover .item-container {
width: 100%;
}
.services-box {
padding: 45px 25px 45px 25px;
}
