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">
<div class="row list-project">
<div class="col-md-7">
<img src="https://www.bootdey.com/image/400x300/FFB6C1/000000" alt="project-image" class="rounded tablet-top"/>
</div>
<div class="col-md-5">
<div class="project-info-box mt-0">
<h5>FOIL LOGO</h5>
<p>Suspendisse convallis, magna in blandit dapibus, diam dui ultrices sem, ut egestas neque magna vel erat.</p>
</div>
<div class="project-info-box mb-10">
<p><b>Client:</b> FOIL COM</p>
<p><b>Date:</b> 10.02.2020</p>
<p><b>Designer:</b> Brian Hawkins</p>
<p><b>Tools:</b> Photoshop, Illustrator & Sketch</p>
</div>
<a href="#/" class="btn btn-primary d-block">VIEW PROJECT</a>
</div>
</div>
<div class="spacer-line-fw border-secondary opc-25 mt-30 mb-30"> </div>
<div class="row list-project">
<div class="col-md-5 tablet-top">
<div class="project-info-box mt-0">
<h5>STATIONERY</h5>
<p>Suspendisse convallis, magna in blandit dapibus, diam dui ultrices sem, ut egestas neque magna vel erat.</p>
</div>
<div class="project-info-box mb-10">
<p><b>Client:</b> LOGO COMPANY</p>
<p><b>Date:</b> 13.02.2020</p>
<p><b>Designer:</b> John Doe</p>
<p><b>Tools:</b> Photoshop & Illustrator</p>
</div>
<a href="#/" class="btn btn-primary d-block">VIEW PROJECT</a>
</div>
<div class="col-md-7">
<img src="https://www.bootdey.com/image/400x300/87CEFA/000000" alt="project-image" class="rounded"/>
</div>
</div>
<div class="spacer-line-fw border-secondary opc-25 mt-30 mb-30"> </div>
<div class="row list-project">
<div class="col-md-7">
<img src="https://www.bootdey.com/image/400x300/B0C4DE/000000" alt="project-image" class="rounded tablet-top"/>
</div>
<div class="col-md-5">
<div class="project-info-box mt-0">
<h5>IDEA BULB</h5>
<p>Suspendisse convallis, magna in blandit dapibus, diam dui ultrices sem, ut egestas neque magna vel erat.</p>
</div>
<div class="project-info-box mb-10">
<p><b>Client:</b> IDEA COMPANY</p>
<p><b>Date:</b> 07.02.2020</p>
<p><b>Designer:</b> Jessica Smith</p>
<p><b>Tools:</b> Photoshop, Illustrator & Sketch</p>
</div>
<a href="#/" class="btn btn-primary d-block">VIEW PROJECT</a>
</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:#f5f5f5;
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;
}
img {
width: 100%;
max-width: 100%;
height: auto;
-webkit-backface-visibility: hidden;
}
.rounded {
border-radius: 5px !important;
}
.btn-xs.btn-icon {
width: 34px;
height: 34px;
max-width: 34px !important;
max-height: 34px !important;
font-size: 10px;
line-height: 34px;
}
/* facebook button */
.btn-facebook, .btn-facebook:active, .btn-facebook:focus {
color: #fff !important;
background: #4e68a1;
border: 2px solid #4e68a1;
}
.btn-facebook:hover {
color: #fff !important;
background: #3b4f7a;
border: 2px solid #3b4f7a;
}
.btn-facebook-link, .btn-facebook-link:active, .btn-facebook-link:focus {
color: #4e68a1 !important;
background: transparent;
border: none;
}
.btn-facebook-link:hover {
color: #3b4f7a !important;
}
.btn-outline-facebook, .btn-outline-facebook:active, .btn-outline-facebook:focus {
color: #4e68a1 !important;
background: transparent;
border: 2px solid #4e68a1;
}
.btn-outline-facebook:hover {
color: #fff !important;
background: #4e68a1;
border: 2px solid #4e68a1;
}
/* twitter button */
.btn-twitter, .btn-twitter:active, .btn-twitter:focus {
color: #fff !important;
background: #65b5f2;
border: 2px solid #65b5f2;
}
.btn-twitter:hover {
color: #fff !important;
background: #5294c6;
border: 2px solid #5294c6;
}
.btn-twitter:hover {
color: #fff !important;
background: #5294c6;
border: 2px solid #5294c6;
}
.btn-twitter-link, .btn-twitter-link:active, .btn-twitter-link:focus {
color: #65b5f2 !important;
background: transparent;
border: none;
}
.btn-twitter-link:hover {
color: #5294c6 !important;
}
.btn-outline-twitter, .btn-outline-twitter:active, .btn-outline-twitter:focus {
color: #65b5f2 !important;
background: transparent;
border: 2px solid #65b5f2;
}
.btn-outline-twitter:hover {
color: #fff !important;
background: #65b5f2;
border: 2px solid #65b5f2;
}
/* google button */
.btn-google, .btn-google:active, .btn-google:focus {
color: #fff !important;
background: #e05d4b;
border: 2px solid #e05d4b;
}
.btn-google:hover {
color: #fff !important;
background: #b94c3d;
border: 2px solid #b94c3d;
}
.btn-google-link, .btn-google-link:active, .btn-google-link:focus {
color: #e05d4b !important;
background: transparent;
border: none;
}
.btn-google-link:hover {
color: #b94c3d !important;
}
.btn-outline-google, .btn-outline-google:active, .btn-outline-google:focus {
color: #e05d4b !important;
background: transparent;
border: 2px solid #e05d4b;
}
.btn-outline-google:hover {
color: #fff !important;
background: #e05d4b;
border: 2px solid #e05d4b;
}
/* linkedin button */
.btn-linkedin, .btn-linkedin:active, .btn-linkedin:focus {
color: #fff !important;
background: #2083bc;
border: 2px solid #2083bc;
}
.btn-linkedin:hover {
color: #fff !important;
background: #186592;
border: 2px solid #186592;
}
.btn-linkedin-link, .btn-linkedin-link:active, .btn-linkedin-link:focus {
color: #2083bc !important;
background: transparent;
border: none;
}
.btn-linkedin-link:hover {
color: #186592 !important;
}
.btn-outline-linkedin, .btn-outline-linkedin:active, .btn-outline-linkedin:focus {
color: #2083bc !important;
background: transparent;
border: 2px solid #2083bc;
}
.btn-outline-linkedin:hover {
color: #fff !important;
background: #2083bc;
border: 2px solid #2083bc;
}
/* pinterest button */
.btn-pinterest, .btn-pinterest:active, .btn-pinterest:focus {
color: #fff !important;
background: #d2373b;
border: 2px solid #d2373b;
}
.btn-pinterest:hover {
color: #fff !important;
background: #ad2c2f;
border: 2px solid #ad2c2f;
}
.btn-pinterest-link, .btn-pinterest-link:active, .btn-pinterest-link:focus {
color: #d2373b !important;
background: transparent;
border: none;
}
.btn-pinterest-link:hover {
color: #ad2c2f !important;
}
.btn-outline-pinterest, .btn-outline-pinterest:active, .btn-outline-pinterest:focus {
color: #d2373b !important;
background: transparent;
border: 2px solid #d2373b;
}
.btn-outline-pinterest:hover {
color: #fff !important;
background: #d2373b;
border: 2px solid #d2373b;
}
/* dribble button */
.btn-dribbble, .btn-dribbble:active, .btn-dribbble:focus {
color: #fff !important;
background: #ec5f94;
border: 2px solid #ec5f94;
}
.btn-dribbble:hover {
color: #fff !important;
background: #b4446e;
border: 2px solid #b4446e;
}
.btn-dribbble-link, .btn-dribbble-link:active, .btn-dribbble-link:focus {
color: #ec5f94 !important;
background: transparent;
border: none;
}
.btn-dribbble-link:hover {
color: #b4446e !important;
}
.btn-outline-dribbble, .btn-outline-dribbble:active, .btn-outline-dribbble:focus {
color: #ec5f94 !important;
background: transparent;
border: 2px solid #ec5f94;
}
.btn-outline-dribbble:hover {
color: #fff !important;
background: #ec5f94;
border: 2px solid #ec5f94;
}
/* instagram button */
.btn-instagram, .btn-instagram:active, .btn-instagram:focus {
color: #fff !important;
background: #4c5fd7;
border: 2px solid #4c5fd7;
}
.btn-instagram:hover {
color: #fff !important;
background: #4252ba;
border: 2px solid #4252ba;
}
.btn-instagram-link, .btn-instagram-link:active, .btn-instagram-link:focus {
color: #4c5fd7 !important;
background: transparent;
border: none;
}
.btn-instagram-link:hover {
color: #4252ba !important;
}
.btn-outline-instagram, .btn-outline-instagram:active, .btn-outline-instagram:focus {
color: #4c5fd7 !important;
background: transparent;
border: 2px solid #4c5fd7;
}
.btn-outline-instagram:hover {
color: #fff !important;
background: #4c5fd7;
border: 2px solid #4c5fd7;
}
/* youtube button */
.btn-youtube, .btn-youtube:active, .btn-youtube:focus {
color: #fff !important;
background: #e52d27;
border: 2px solid #e52d27;
}
.btn-youtube:hover {
color: #fff !important;
background: #b31217;
border: 2px solid #b31217;
}
.btn-youtube-link, .btn-youtube-link:active, .btn-youtube-link:focus {
color: #e52d27 !important;
background: transparent;
border: none;
}
.btn-youtube-link:hover {
color: #b31217 !important;
}
.btn-outline-youtube, .btn-outline-youtube:active, .btn-outline-youtube:focus {
color: #e52d27 !important;
background: transparent;
border: 2px solid #e52d27;
}
.btn-outline-youtube:hover {
color: #fff !important;
background: #e52d27;
border: 2px solid #e52d27;
}
.btn-xs.btn-icon span, .btn-xs.btn-icon i {
line-height: 34px;
}
.btn-icon.btn-circle span, .btn-icon.btn-circle i {
margin-top: -1px;
margin-right: -1px;
}
.btn-icon i {
margin-top: -1px;
}
.btn-icon span, .btn-icon i {
display: block;
line-height: 50px;
}
a.btn, a.btn-social {
display: inline-block;
}
.mr-5 {
margin-right: 5px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.btn-facebook, .btn-facebook:active, .btn-facebook:focus {
color: #fff !important;
background: #4e68a1;
border: 2px solid #4e68a1;
}
.btn-circle {
border-radius: 50% !important;
}
.project-info-box p {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #d5dadb;
}
p {
font-family: "Barlow", sans-serif !important;
font-weight: 300;
font-size: 1rem;
color: #686c6d;
letter-spacing: 0.03rem;
margin-bottom: 10px;
}
b, strong {
font-weight: 700 !important;
}
.border-secondary {
border-color: #d5dadb !important;
}
.opc-25 {
opacity: 0.25 !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mt-30 {
margin-top: 30px !important;
}
.spacer-line-full-width, .spacer-line-fw {
width: 100%;
line-height: 0;
border-bottom: 2px solid #f7f7f7;
}