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" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"/>
<div class="container bootstrap snippets bootdey">
<h1 class="text-center section-title">Our Portfolio</h1>
<hr/>
<section id="portfolio" class="gray-bg padding-top-bottom">
<div class="container bootstrap snippets bootdey">
<div class="categories">
<ul>
<li class="active">
<a href="#/" data-filter="*">All Categories</a>
</li>
<li>
<a href="#/" data-filter=".web-design">Web Design</a>
</li>
<li>
<a href="#/" data-filter=".apps">Apps</a>
</li>
<li>
<a href="#/" data-filter=".psd">PSD</a>
</li>
</ul>
</div>
<div class="projects-container scrollimation in">
<div class="row">
<article class="col-md-4 col-sm-6 portfolio-item web-design apps psd">
<div class="portfolio-thumb in">
<a href="#/" class="main-link">
<img class="img-responsive img-center" src="https://www.bootdey.com/image/350x280/FFB6C1/000000" alt=""/>
<h2 class="project-title">Billing</h2>
<span class="overlay-mask"></span>
</a>
<a class="enlarge cboxElement" href="#/" title="Bills Project"><i class="fa fa-expand fa-fw"></i></a>
<a class="link" href="#/"><i class="fa fa-eye fa-fw"></i></a>
</div>
</article>
<article class="col-md-4 col-sm-6 portfolio-item apps">
<div class="portfolio-thumb in">
<a href="#/" class="main-link">
<img class="img-responsive img-center" src="https://www.bootdey.com/image/350x280/87CEFA/000000" alt=""/>
<h2 class="project-title">Augmented Tourist</h2>
<span class="overlay-mask"></span>
</a>
<a class="link centered" href=""><i class="fa fa-eye fa-fw"></i></a>
</div>
</article>
<article class="col-md-4 col-sm-6 portfolio-item web-design psd">
<div class="portfolio-thumb in">
<a href="#/" class="main-link">
<img class="img-responsive img-center" src="https://www.bootdey.com/image/350x280/FF7F50/000000" alt=""/>
<h2 class="project-title">Get Colored</h2>
<span class="overlay-mask"></span>
</a>
<a class="enlarge centered cboxElement" href="#/" title="Get Colored"><i class="fa fa-expand fa-fw"></i></a>
</div>
</article>
<article class="col-md-4 col-sm-6 portfolio-item apps">
<div class="portfolio-thumb in">
<a href="#/" class="main-link">
<img class="img-responsive img-center" src="https://www.bootdey.com/image/350x280/20B2AA/000000" alt=""/>
<h2 class="project-title">Holiday Selector</h2>
<span class="overlay-mask"></span>
</a>
<a class="enlarge cboxElement" href="#/" title="Holiday Selector"><i class="fa fa-expand fa-fw"></i></a>
<a class="link" href="#/"><i class="fa fa-eye fa-fw"></i></a>
</div>
</article>
<article class="col-md-4 col-sm-6 portfolio-item web-design psd">
<div class="portfolio-thumb in">
<a href="#/" class="main-link">
<img class="img-responsive img-center" src="https://www.bootdey.com/image/350x280/9400D3/000000" alt=""/>
<h2 class="project-title">Scavenger Hunt</h2>
<span class="overlay-mask"></span>
</a>
<a class="enlarge cboxElement" href="#/" title="Scavenger Hunt"><i class="fa fa-expand fa-fw"></i></a>
<a class="link" href="#/"><i class="fa fa-eye fa-fw"></i></a>
</div>
</article>
<article class="col-md-4 col-sm-6 portfolio-item web-design apps">
<div class="portfolio-thumb in">
<a href="#/" class="main-link">
<img class="img-responsive img-center" src="https://www.bootdey.com/image/350x280/87CEFA/000000" alt=""/>
<h2 class="project-title">Sonor</h2>
<span class="overlay-mask"></span>
</a>
<a class="enlarge cboxElement" href="#/" title="Sonor"><i class="fa fa-expand fa-fw"></i></a>
<a class="link" href="#/"><i class="fa fa-eye fa-fw"></i></a>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background: #f3f3f3;
}
.categories ul {
list-style:none;
padding:0;
margin:0;
margin-bottom:20px;
text-align:center;
}
.categories ul li{
display:inline-block;
padding:0;
line-height:24px;
background:transparent;
margin:0;
margin-left:5px;
margin-bottom:10px;
}
.categories ul li a{
display:block;
font-size:18px;
font-weight:500;
padding:10px 20px;
border-radius:5px;
border:2px solid transparent;
-webkit-transition:all .2s ease-out;
transition:all .2s ease-out;
}
.categories ul li a,
.categories ul li a:active,
.categories ul li a:hover{
line-height:24px;
background:#fff;
color:#4E5961;
text-decoration:none;
}
.categories ul li a:hover,
.categories ul li.active a{
color:#fff;
background:#5cc9df;
}
.projects-container .row{
-webkit-transition:height .5s ease-out;
transition:height .5s ease-out;
}
.portfolio-item {
position:relative;
margin-bottom:30px;
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
-webkit-transition:all .4s ease-out;
transition:all .4s ease-out;
}
.portfolio-item.filtered {
-webkit-transform:scale(0.5);
transform:scale(0.5);
opacity:0.2;
cursor:default;
}
.no-opacity .portfolio-item.filtered {
display:none;
}
.portfolio-item.filtered a{
cursor:default;
}
.portfolio-item.filtered .enlarge,
.portfolio-item.filtered .link,
.portfolio-item.filtered .overlay-mask,
.portfolio-item.filtered .project-title{
display:none;
}
.portfolio-thumb {
display:block;
position:relative;
box-shadow:0 2px 5px rgba(0,0,0,0.08);
overflow:hidden;
}
.scrollimation .portfolio-thumb {
-webkit-transform:translateY(100px);
transform:translateY(100px);
opacity:0;
-webkit-transition:opacity .4s ease-out, -webkit-transform .4s ease-out;
transition:opacity .4s ease-out, transform .4s ease-out;
}
.touch .scrollimation .portfolio-thumb,
.scrollimation .portfolio-thumb.in {
-webkit-transform:translateY(0px);
transform:translateY(0px);
opacity:1;
}
.portfolio-thumb .overlay-mask{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#5CC9DF;
opacity:0;
filter:alpha(opacity=0);
z-index:1;
-webkit-transition:opacity .3s ease-out;
transition:opacity .3s ease-out;
}
.portfolio-thumb:hover .overlay-mask {
opacity:0.8;
filter:alpha(opacity=80);
}
.portfolio-thumb .enlarge,
.portfolio-thumb .link{
display:inline-block;
margin:0;
margin-top:-25px;
font-size:50px;
line-height:50px;
color:#fff;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
height:50px;
width:64px;
top:40%;
left:50%;
text-align:center;
z-index:3;
}
.portfolio-thumb .enlarge{
margin-left:-84px;
-webkit-transform:translateX(-200px);
transform:translateX(-200px);
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.portfolio-thumb:hover .enlarge{
-webkit-transform:translateX(0);
transform:translateX(0);
opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .3s ease-out .3s;
transition:all .3s ease-out .3s;
}
.portfolio-thumb .link{
margin-left:20px;
-webkit-transform:translateX(200px);
transform:translateX(200px);
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.portfolio-thumb:hover .link{
-webkit-transform:translate(0);
transform:translate(0);
opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .3s ease-out .6s;
transition:all .3s ease-out .6s;
}
.portfolio-thumb .enlarge.centered,
.portfolio-thumb .link.centered{
margin-left:-32px;
-webkit-transform:translateY(-200px);
transform:translateY(-200px);
-webkit-transition-delay:0s;
transition-delay:0s;
}
.portfolio-thumb:hover .enlarge.centered,
.portfolio-thumb:hover .link.centered{
-webkit-transform:translateY(0);
transform:translateY(0);
-webkit-transition-delay:0.3s;
transition-delay:0.3s;
}
.portfolio-thumb .project-title {
display:block;
width:100%;
position:absolute;
bottom:-100px;
background:#fff;
margin:0;
padding:20px 0;
font-size:21px;
font-weight:300;
color:#777;
text-align:center;
z-index:2;
-webkit-transition:bottom .4s ease-out,color .2s ease-out;
transition:bottom .4s ease-out,color .2s ease-out;
}
.portfolio-thumb:hover .project-title {
bottom:0;
-webkit-transition:bottom .3s ease-out .1s,color .2s ease-out 0s;
transition:bottom .3s ease-out .1s,color .2s ease-out 0s;
}
.portfolio-thumb .project-title:hover {
color:#5CC9DF;
} 
