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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<div class="container">
<ul class="row portfolio lightbox list-unstyled mb-0 shuffle" id="grid" s>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/87CEFA/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">STATIONERY</h5>
<p class="project-skill">Branding, Illustration</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="STATIONERY"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/B0C4DE/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">FOIL LOGO</h5>
<p class="project-skill">Design, Branding</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="FOIL LOGO"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/FFE4B5/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">IDEA BULB</h5>
<p class="project-skill">Design, Illustration</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="IDEA BULB"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/AFEEEE/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">MOUNTAINS</h5>
<p class="project-skill">Design, Illustration</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="MOUNTAINS"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/DDA0DD/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">HELLO WORLD</h5>
<p class="project-skill">Branding</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="HELLO WORLD"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/4682B4/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">CAMERON</h5>
<p class="project-skill">Design</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="CAMERON"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/F5F5F5/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">WHALE</h5>
<p class="project-skill">Design, Illustration</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="WHALE"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/FFF5EE/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">BRANDING</h5>
<p class="project-skill">Branding</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="BRANDING"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/B0E0E6/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">HYMALAYAS</h5>
<p class="project-skill">Design, Illustration</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="HYMALAYAS"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/FFEFD5/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">CUPCAKE</h5>
<p class="project-skill">Design, Illustration</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="CUPCAKE"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/EEE8AA/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">BRANDMINUTE</h5>
<p class="project-skill">Branding</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="BRANDMINUTE"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
<li class="col-md-6 col-lg-3 project shuffle-item filtered" >
<div class="card mb-0">
<div class="project m-0">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="https://www.bootdey.com/image/350x180/48D1CC/000000" alt=""/>
<div class="overlay">
<div class="hovereffect-title">
<div class="project-title-wrapper">
<h5 class="project-title fs-18">PREMIUM LOGO</h5>
<p class="project-skill">Design, Branding</p>
</div>
</div>
<div class="hovereffect-title project-icons">
<a href="#/"><i class="fa fa-eye"></i></a>
<a href="#/" class="image-lightbox" title="PREMIUM LOGO"><i class="fa fa-th"></i></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</li>
</ul>
</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;
margin-top:20px;}
/*------- portfolio -------*/
.project {
margin: 15px 0;
}
.no-gutter .project {
margin: 0 !important;
padding: 0 !important;
}
.has-spacer {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.has-spacer-extra-space {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.has-side-spacer {
margin-left: 30px;
margin-right: 30px;
}
.project-title {
font-size: 1.25rem;
}
.project-skill {
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.06rem;
}
.project-info-box {
margin: 15px 0;
background-color: #fff;
padding: 30px 40px;
border-radius: 5px;
}
.project-info-box p {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #d5dadb;
}
.project-info-box p:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
/*--- default effect ---*/
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
z-index: 2;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.25);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
border-radius: 5px;
}
.primary-dark .hovereffect .overlay {
background-color: rgba(215, 48, 39, 0.95);
}
.white .hovereffect .overlay {
background-color: rgba(255, 255, 255, 0.75);
}
.dark-overlay .hovereffect .overlay {
background-color: rgba(0, 0, 0, 0.5);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .3s linear;
transition: all .3s linear;
border: 10px solid #fff;
border-radius: 5px;
}
.no-image-border .hovereffect img {
border: none;
border-radius: 5px;
}
.no-image-border.no-gutter .hovereffect img, .no-image-border.no-gutter .hovereffect .overlay {
border: none;
border-radius: 0;
}
.hovereffect:hover img {
-webkit-transform: rotate(-7deg) scale(1.33);
-ms-transform: rotate(-7deg) scale(1.33);
transform: rotate(-7deg) scale(1.33);
}
.hovereffect-title .project-title-wrapper {
position: absolute;
top: 45%;
left: 0;
margin-top: -32px;
width: 100%;
padding: 10px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.project:hover .hovereffect-title .project-title-wrapper {
top: 50%;
}
.hovereffect-title .project-title {
color: #fff;
background: transparent;
margin-bottom: 5px;
}
.white .hovereffect-title .project-title {
color: #171819;
}
.hovereffect-title p {
color: #fff;
background: transparent;
font-size: 12px;
margin: 0;
}
.white .hovereffect-title p {
color: #686c6d;
}
.hovereffect-title .hover-icons {
font-size: 16px;
background: transparent;
position: absolute;
bottom: 10%;
left: 0;
right: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.project:hover .hovereffect-title .hover-icons {
bottom: 15%;
}
.hovereffect-title .hover-icons a {
color: #fff;
}
.white .hovereffect-title .hover-icons a {
color: #171819;
}
.hovereffect-title.project-icons {
position: absolute;
right: 0;
bottom: -10px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.project:hover .hovereffect-title.project-icons {
bottom: 0;
}
.hovereffect-title.project-icons a {
display: inline-block;
position: relative;
color: #fff;
font-size: 11px;
line-height: 40px;
width: 45px;
height: 38px;
background: #8e9294;
opacity: 0.75;
}
.hovereffect-title.project-icons a i {
margin-right: -2px;
}
.hovereffect-title.project-icons a:first-child {
background-color: #7c8284;
margin-right: -4px;
}
.project-icons a:hover, .project-icons a:first-child:hover {
background-color: #505254 !important;
opacity: 1;
}
.hovereffect-title.project-icons .hover-icons {
color: #fff;
position: relative;
top: 0;
left: 0;
right: 0;
margin-top: 0;
opacity: 1;
}
.hovereffect-title.project-icons a:hover {
background: #931c19;
}
.primary-dark .project-icons a {
color: #d73027;
background-color: #fff;
}
.primary-dark .project-icons a:hover {
background-color: #efefef;
}
.primary-dark .project-icons a:hover {
color: #fff;
}
.primary-dark .hovereffect-title.project-icons .hover-icons {
color: #d73027;
}
.white .hovereffect-title .hover-icons {
color: #171819;
}
.white .hovereffect-title.project-icons .hover-icons {
color: #171819;
}
.hovereffect-title .hover-icons a {
opacity: 0.7;
margin: 0 4px;
}
.hovereffect-title .hover-icons a {
opacity: 0.7;
}
.hovereffect-title .hover-icons a:hover {
opacity: 1;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.boxed-portfolio .card {
background-color: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
.boxed-portfolio .hovereffect img, .boxed-portfolio .hovereffect .overlay {
border: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.boxed-portfolio .card-body {
padding: 25px 30px;
border-top: 1px solid #efefef;
}
/*--- end of default effect ---*/
/*--- portfolio-filter ---*/
.portfolio-filter {
padding: 20px 0;
}
.no-gutter .portfolio-filter {
margin-bottom: 30px;
}
.portfolio-filter.list-inline li {
display: inline-block;
color: #fff;
font-size: 1rem;
padding: 0;
margin-right: 7px;
}
.portfolio-filter a {
color: #d5dadb;
background-color: #7c8284;
font-family: "Barlow", sans-serif !important;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.06rem;
line-height: 40px;
border-radius: 2px;
margin: 0;
padding: 6px 24px;
border-radius: 50px;
opacity: 1 !important;
}
.portfolio-filter a:hover {
color: #d5dadb;
background-color: #252728;
}
.portfolio-filter a.active {
color: #fff;
background-color: #d73027;
}
#portfolio-slider .project {
max-width: 900px;
margin: 0 auto;
}
img {
width: 100%;
max-width: 100%;
height: auto;
-webkit-backface-visibility: hidden;
}