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 href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="show-results mt-4">
<div class="float-left">
<h5 class="text-dark mb-0 pt-2">Showing Results : 1-9 of 300</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="left-sidebar">
<div class="accordion" id="accordionExample">
<div class="card mt-4">
<a data-toggle="collapse" href="#collapseOne" class="job-list" aria-expanded="true" aria-controls="collapseOne">
<div class="card-header" id="headingOne">
<h6 class="mb-0 text-dark f-18">Last Activity</h6>
</div>
</a>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body p-0">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio1">Last Hour</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio2">Last 24 hours</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio3">Last 7 days</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio4" name="customRadio" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio4">Last 14 days</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio5" name="customRadio" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio5">Last 30 days</label>
</div>
</div>
</div>
</div>
<div class="card mt-4">
<a data-toggle="collapse" href="#collapsetwo" class="job-list" aria-expanded="true" aria-controls="collapsetwo">
<div class="card-header" id="headingtwo">
<h6 class="mb-0 text-dark f-18">Team Size</h6>
</div>
</a>
<div id="collapsetwo" class="collapse show" aria-labelledby="headingtwo">
<div class="card-body p-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck7"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customCheck7">1 To 50</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck8"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customCheck8">51 To 100</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customCheck3">101 To 150</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customCheck4">151 To 200</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck5"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customCheck5">201 To 250</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck6"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customCheck6">251 To 300</label>
</div>
</div>
</div>
</div>
<div class="card mt-4">
<a data-toggle="collapse" href="#collapsethree" class="job-list" aria-expanded="true" aria-controls="collapsethree">
<div class="card-header" id="headingthree">
<h6 class="mb-0 text-dark f-18">Categories</h6>
</div>
</a>
<div id="collapsethree" class="collapse show" aria-labelledby="headingthree">
<div class="card-body p-0">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio7" name="customRadio1" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio7">Web Designer</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio8" name="customRadio1" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio8">Graphic Designer</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio9" name="customRadio1" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio9">PHP Developer</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio10" name="customRadio1" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio10">UI/UX Designer</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio11" name="customRadio1" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio11">Banking</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio12" name="customRadio1" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio12">Accountancy</label>
</div>
</div>
</div>
</div>
<div class="card mt-4">
<a data-toggle="collapse" href="#collapsefour" class="job-list" aria-expanded="true" aria-controls="collapsefour">
<div class="card-header" id="headingfour">
<h6 class="mb-0 text-dark f-18">Gender</h6>
</div>
</a>
<div id="collapsefour" class="collapse show" aria-labelledby="headingfour">
<div class="card-body p-0">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio13" name="customRadio3" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio13">Male</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio14" name="customRadio3" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio14">Female</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio15" name="customRadio3" class="custom-control-input"/>
<label class="custom-control-label ml-1 text-muted f-15" for="customRadio15">Others</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Kyle Jones</a></h5>
<p class="text-muted f-14 mb-0">Web Delveloper, Graphic Disegner</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>419 Lakeland Terrace Detroit, MI 48226</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.9</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Susan Roth</a></h5>
<p class="text-muted f-14 mb-0">PHP Delveloper, Web Disegner</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2984 Woodhill Avenue Easton, MD 21601</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.5</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Ricky Cash</a></h5>
<p class="text-muted f-14 mb-0">UI/UX Designer, Software Developer</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2683 Farland Street Chicago, IL 60631</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star-outline f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.0</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Kelly Perez</a></h5>
<p class="text-muted f-14 mb-0">Software Developer, Graphic Disegner</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2120 County Line Road St George, FL 34683</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.5</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Dale Gambill</a></h5>
<p class="text-muted f-14 mb-0">Graphic Disegner, Web Designer</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>3633 Cessna Drive Fort Wayne, IN 46802</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.7</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Rita Guidry</a></h5>
<p class="text-muted f-14 mb-0">PHP Delveloper, Web Disegner</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2797 Bartlett Avenue Southfield, MI 48075</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.8</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Matt Morgan</a></h5>
<p class="text-muted f-14 mb-0">Web Delveloper, PHP Delveloper</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2639 Warner Street Casper, WY 82601</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">5.0</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Hattie Blaser</a></h5>
<p class="text-muted f-14 mb-0">Graphic Disegner, Web Designer</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>4883 Patterson Road Brooklyn, NY 11230</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.5</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="list-grid-item mt-4">
<div class="grid-item-content p-2">
<div class="employers-list-img mt-3">
<img src="https://bootdey.com/img/Content/avatar/avatar9.png" alt="" class="img-fluid mx-auto d-block rounded-circle"/>
</div>
<div class="grid-list-desc text-center mt-4">
<h5 class="mb-1"><a href="#/" class="text-dark">Robert Cole</a></h5>
<p class="text-muted f-14 mb-0">Web Delveloper, Graphic Disegner</p>
<p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2424 Lowland Drive Chicago, IL 60606</p>
<ul class="employers-icons list-inline mb-1">
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
<li class="list-inline-item"><a href="#/" class="text-warning"><i class="mdi mdi-star-outline f-19"></i></a></li>
</ul>
<span class="badge badge-warning text-white">4.2</span>
</div>
</div>
<hr class="mt-0 mb-0"/>
<div class="apply-button text-center mt-2 mb-2">
<a href="#/" class="btn btn-custom btn-sm">View Profile</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<nav aria-label="Page navigation example">
<ul class="pagination job-pagination justify-content-center mt-5 mb-5">
<li class="page-item disabled">
<a class="page-link" href="#/" tabindex="-1" aria-disabled="true">
<i class="mdi mdi-chevron-double-left f-15"></i>
</a>
</li>
<li class="page-item active"><a class="page-link" href="#/">1</a></li>
<li class="page-item"><a class="page-link" href="#/">2</a></li>
<li class="page-item"><a class="page-link" href="#/">3</a></li>
<li class="page-item"><a class="page-link" href="#/">4</a></li>
<li class="page-item">
<a class="page-link" href="#/">
<i class="mdi mdi-chevron-double-right f-15"></i>
</a>
</li>
</ul>
</nav>
</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:#F8F8FF;
margin-top:20px;
}
/********************
EMPLOYERS LIST
*********************/
.employers-list-bg {
padding: 180px 0px 80px 0px;
background-size: cover;
position: relative;
background-position: center center;
}
.employers-list-img img {
max-width: 80px;
-webkit-box-shadow: 0 0 5px 0px #d7d7d7;
box-shadow: 0 0 5px 0px #d7d7d7;
}
.employers-icons li {
margin: 0px !important;
}
/********************
EMPLOYERS DETAILS
*********************/
.employers-details-bg {
padding: 180px 0px 80px 0px;
background-size: cover;
position: relative;
background-position: center center;
}
.employers-details {
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
.employers-share-job li a {
height: 40px;
width: 40px;
color: #777777;
text-align: center;
font-size: 19px;
display: inline-block;
line-height: 38px;
border-radius: 4px;
border: 1px solid #dddddd;
-webkit-transition: all 0.5s;
transition: all 0.5s;
margin: 6px 0;
transition: all 0.5s;
}
.employers-share-job li a:hover {
background-color: #ff4f6c;
color: #ffffff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
border-color: #ff4f6c;
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
-webkit-box-shadow: 0 3px 20px -8px #000000;
box-shadow: 0 3px 20px -8px #000000;
}
@media (min-width: 200px) and (max-width: 768px) {
.m-14 {
margin: 14px 0px;
}
}
@media (max-width: 425px) {
.employers-details-time h6 {
text-align: center !important;
}
.employers-details-item-border {
margin-bottom: 1rem !important;
margin-top: 1rem !important;
}
}
.list-grid-item {
border: 1px solid #ececec;
border-radius: 6px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.list-grid-item:hover {
-webkit-box-shadow: 0 0 20px 0px rgba(47, 47, 47, 0.09);
box-shadow: 0 0 20px 0px rgba(47, 47, 47, 0.09);
-webkit-transition: all 0.5s;
transition: all 0.5s;
border-color: transparent;
}
.left-sidebar .card-body {
border-bottom: 1px solid #ececec;
}
.custom-control {
margin: 11px 20px;
}
.card-header {
background-color: transparent;
margin-bottom: 0 !important;
}
.pagination.job-pagination .page-link {
border-radius: 50% !important;
margin: 0 4px;
height: 46px;
width: 45px;
line-height: 29px;
text-align: center;
color: #777777;
}
.page-item.active .page-link {
background-color: #ff4f6c;
border-color: #ff4f6c;
color: #ffffff !important;
}
.f-14 {
font-size: 14px;
}
