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>
<section>
<div class="container">
<div class="text-center margin-40px-bottom">
<h3 class="no-margin-bottom">Top Job Categories</h3>
</div>
<div class="row">
<div class="col-lg-3 sm-margin-30px-bottom">
<div class="h-100">
<a href="#/" class="card bg-img box-hover cover-background border-0 p-4 h-100" style={{/*background-image: url(https://www.bootdey.com/image/300x232/87CEFA/000000);*/}}>
<div class="mt-auto position-relative z-index-9">
<h5 class="text-white">HealthCare</h5>
<div class="position-relative z-index-9 text-white opacity6">120 jobs</div>
</div>
</a>
</div>
</div>
<div class="col-lg-9">
<div class="row margin-30px-bottom">
<div class="col-md-4 xs-margin-30px-bottom">
<a href="#/" class="card bg-img box-hover cover-background border-0 p-4" data-background="img/content/02.jpg" style={{/*background-image: url(https://www.bootdey.com/image/340x232/20B2AA/000000);*/}}>
<div class="mt-auto position-relative z-index-9">
<h5 class="text-white">Education</h5>
<div class="position-relative z-index-9 text-white opacity6">12 jobs</div>
</div>
</a>
</div>
<div class="col-md-4 xs-margin-30px-bottom">
<a href="#/" class="card bg-img box-hover cover-background border-0 p-4" data-background="img/content/03.jpg" style={{/*background-image: url(https://www.bootdey.com/image/340x232/00CED1/000000);*/}}>
<div class="mt-auto position-relative z-index-9">
<h5 class="text-white">Reataurant</h5>
<div class="position-relative z-index-9 text-white opacity6">20 jobs</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="#/" class="card bg-img box-hover cover-background border-0 p-4" data-background="img/content/04.jpg" style={{/*background-image: url(https://www.bootdey.com/image/340x232/8A2BE2/000000);*/}}>
<div class="mt-auto position-relative z-index-9">
<h5 class="text-white">Construction</h5>
<div class="position-relative z-index-9 text-white opacity6">94 jobs</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-7 xs-margin-30px-bottom">
<a href="#/" class="card bg-img box-hover cover-background border-0 p-4" data-background="img/content/05.jpg" style={{/*background-image: url(https://www.bootdey.com/image/340x232/FF7F50/000000);*/}}>
<div class="mt-auto position-relative z-index-9">
<h5 class="text-white">Design & Art</h5>
<div class="position-relative z-index-9 text-white opacity6">231 jobs</div>
</div>
</a>
</div>
<div class="col-md-5">
<a href="#/" class="card bg-img box-hover cover-background border-0 p-4" data-background="img/content/06.jpg" style={{/*background-image: url(https://www.bootdey.com/image/340x232/FF1493/000000);*/}}>
<div class="mt-auto position-relative z-index-9">
<h5 class="text-white">Finance</h5>
<div class="position-relative z-index-9 text-white opacity6">45 jobs</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{
background:#dcdcdc;
margin-top:20px;
}
.h-100 {
height: 100%!important;
}
.box-hover {
min-height: 210px;
position: relative;
}
.cover-background {
position: relative !important;
background-size: cover !important;
overflow: hidden !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.margin-30px-bottom {
margin-bottom: 30px;
}
.box-hover:before {
position: absolute;
content: "";
top: 0;
left: 0;
background: rgba(0,0,0,0.76);
background: -webkit-linear-gradient(top, transparent, #000 116%);
background: linear-gradient(-180deg, transparent, #000 116%);
z-index: 0;
width: 100%;
height: 100%;
}