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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<footer class="footer_area section_padding_130_0">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">
<div class="single-footer-widget section_padding_0_130">
<div class="footer-logo mb-3"></div>
<p>Appland is completely creative, lightweight, clean app landing page.</p>
<div class="copywrite-text mb-5">
<p class="mb-0">Made with <i class="lni-heart mr-1"></i>by<a class="ml-1" href="https://wrapbootstrap.com/user/DesigningWorld">Designing World</a></p>
</div>
<div class="footer_social_area"><a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a><a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Pinterest"><i class="fa fa-pinterest"></i></a><a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Skype"><i class="fa fa-skype"></i></a><a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg">
<div class="single-footer-widget section_padding_0_130">
<h5 class="widget-title">About</h5>
<div class="footer_menu">
<ul>
<li><a href="#/">About Us</a></li>
<li><a href="#/">Corporate Sale</a></li>
<li><a href="#/">Terms & Policy</a></li>
<li><a href="#/">Community</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg">
<div class="single-footer-widget section_padding_0_130">
<h5 class="widget-title">Support</h5>
<div class="footer_menu">
<ul>
<li><a href="#/">Help</a></li>
<li><a href="#/">Support</a></li>
<li><a href="#/">Privacy Policy</a></li>
<li><a href="#/">Term & Conditions</a></li>
<li><a href="#/">Help & Support</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg">
<div class="single-footer-widget section_padding_0_130">
<h5 class="widget-title">Contact</h5>
<div class="footer_menu">
<ul>
<li><a href="#/">Call Centre</a></li>
<li><a href="#/">Email Us</a></li>
<li><a href="#/">Term & Conditions</a></li>
<li><a href="#/">Help Center</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{margin-top:20px;}
.footer_area {
position: relative;
z-index: 1;
overflow: hidden;
webkit-box-shadow: 0 8px 48px 8px rgba(47, 91, 234, 0.175);
box-shadow: 0 8px 48px 8px rgba(47, 91, 234, 0.175);
padding:60px;
}
.footer_area .row {
margin-left: -25px;
margin-right: -25px;
}
.footer_area .row .col,
.footer_area .row .col-1,
.footer_area .row .col-10,
.footer_area .row .col-11,
.footer_area .row .col-12,
.footer_area .row .col-2,
.footer_area .row .col-3,
.footer_area .row .col-4,
.footer_area .row .col-5,
.footer_area .row .col-6,
.footer_area .row .col-7,
.footer_area .row .col-8,
.footer_area .row .col-9,
.footer_area .row .col-auto,
.footer_area .row .col-lg,
.footer_area .row .col-lg-1,
.footer_area .row .col-lg-10,
.footer_area .row .col-lg-11,
.footer_area .row .col-lg-12,
.footer_area .row .col-lg-2,
.footer_area .row .col-lg-3,
.footer_area .row .col-lg-4,
.footer_area .row .col-lg-5,
.footer_area .row .col-lg-6,
.footer_area .row .col-lg-7,
.footer_area .row .col-lg-8,
.footer_area .row .col-lg-9,
.footer_area .row .col-lg-auto,
.footer_area .row .col-md,
.footer_area .row .col-md-1,
.footer_area .row .col-md-10,
.footer_area .row .col-md-11,
.footer_area .row .col-md-12,
.footer_area .row .col-md-2,
.footer_area .row .col-md-3,
.footer_area .row .col-md-4,
.footer_area .row .col-md-5,
.footer_area .row .col-md-6,
.footer_area .row .col-md-7,
.footer_area .row .col-md-8,
.footer_area .row .col-md-9,
.footer_area .row .col-md-auto,
.footer_area .row .col-sm,
.footer_area .row .col-sm-1,
.footer_area .row .col-sm-10,
.footer_area .row .col-sm-11,
.footer_area .row .col-sm-12,
.footer_area .row .col-sm-2,
.footer_area .row .col-sm-3,
.footer_area .row .col-sm-4,
.footer_area .row .col-sm-5,
.footer_area .row .col-sm-6,
.footer_area .row .col-sm-7,
.footer_area .row .col-sm-8,
.footer_area .row .col-sm-9,
.footer_area .row .col-sm-auto,
.footer_area .row .col-xl,
.footer_area .row .col-xl-1,
.footer_area .row .col-xl-10,
.footer_area .row .col-xl-11,
.footer_area .row .col-xl-12,
.footer_area .row .col-xl-2,
.footer_area .row .col-xl-3,
.footer_area .row .col-xl-4,
.footer_area .row .col-xl-5,
.footer_area .row .col-xl-6,
.footer_area .row .col-xl-7,
.footer_area .row .col-xl-8,
.footer_area .row .col-xl-9,
.footer_area .row .col-xl-auto {
padding-right: 25px;
padding-left: 25px;
}
.single-footer-widget {
position: relative;
z-index: 1;
}
.single-footer-widget .copywrite-text a {
color: #747794;
font-size: 1rem;
}
.single-footer-widget .copywrite-text a:hover,
.single-footer-widget .copywrite-text a:focus {
color: #3f43fd;
}
.single-footer-widget .widget-title {
margin-bottom: 1.5rem;
}
.single-footer-widget .footer_menu li a {
color: #747794;
margin-bottom: 1rem;
display: block;
font-size: 1rem;
}
.single-footer-widget .footer_menu li a:hover,
.single-footer-widget .footer_menu li a:focus {
color: #3f43fd;
}
.single-footer-widget .footer_menu li:last-child a {
margin-bottom: 0;
}
.footer_social_area {
position: relative;
z-index: 1;
}
.footer_social_area a {
border-radius: 50%;
height: 40px;
text-align: center;
width: 40px;
display: inline-block;
background-color: #f5f5ff;
line-height: 40px;
-webkit-box-shadow: none;
box-shadow: none;
margin-right: 10px;
}
.footer_social_area a i {
line-height: 36px;
}
.footer_social_area a:hover,
.footer_social_area a:focus {
color: #ffffff;
}
@-webkit-keyframes bi-cycle {
0% {
left: 0;
}
100% {
left: 100%;
}
}
@keyframes bi-cycle {
0% {
left: 0;
}
100% {
left: 100%;
}
}
ol li, ul li {
list-style: none;
}
ol, ul {
margin: 0;
padding: 0;
}
