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" />
<div class="footer">
<div class="container">
<div class="row text-center">
<div class="col-lg-12 col-sm-12 col-xs-12">
<div class="footer_menu">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/">About</a></li>
<li><a href="#/">Service</a></li>
<li><a href="#/">Works</a></li>
<li><a href="#/">Contact</a></li>
</ul>
</div>
<div class="footer_copyright">
<p>© 2021 Sai. All Rights Reserved.</p>
</div>
<div class="footer_profile">
<ul>
<li><a href="#/"><i class="fa fa-facebook"></i></a></li>
<li><a href="#/"><i class="fa fa-twitter"></i></a></li>
<li><a href="#/"><i class="fa fa-instagram"></i></a></li>
<li><a href="#/"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
</div>
</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{margin-top:20px;}
.footer {
background:#232a34;
padding-bottom: 50px;
padding-top: 80px;
}
.footer_menu {
margin-bottom: 20px;
}
.footer_menu ul {
list-style: none;
text-align: center;
}
.footer_menu ul li{display: inline-block;}
.footer_menu ul li a {
color:#fff;
padding: 0 10px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.footer_menu ul li a:hover{color:#554c86;}
/*START FOOTER SOCIAL DESIGN*/
.footer_profile{margin-bottom:40px;}
.footer_profile ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.footer_profile ul li{
display: inline-block;
}
@media only screen and (max-width:480px) {
.footer_profile ul li{margin:2px;}
}
.footer_profile ul li a img{width:60px;}
.footer_profile ul li a {
background: #554c86;
width: 40px;
height: 40px;
display: block;
text-align: center;
margin-right: 5px;
border-radius: 50%;
line-height: 40px;
box-sizing: border-box;
text-decoration: none;
-webkit-transition: .3s;
transition: .3s;
color: #fff;
}
.footer_copyright {
margin-bottom: 20px;
text-transform: uppercase;
font-size: 12px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: #fff;
}
