How to create sticky footer in ReactJS ?
Last Updated :
16 Nov, 2023
Creating a sticky footer in React jS is a common requirement when designing web applications or websites. A sticky footer remains fixed at the bottom of the screen, regardless of the content’s height. In this article, we will see how to create a sticky footer in ReactJS.
Prerequisites:
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app react-footer
Step 2: After creating your project folder i.e. react-footer, move to it using the following command:
cd react-footer
Project Structure:
Example: This example implement the sticky footer to the web page.
Javascript
import React from "react" ;
import Footer from "./Footer" ;
import "./App.css" ;
const App = () => (
<div className= "App" >
<h3>GeeksforGeeks</h3>
<h2>Sticky Footer using Reactjs!</h2>
<Footer />
</div>
);
export default App;
|
Javascript
import React from "react" ;
const Footer = () => (
<footer className= "footer" >
<p>This is react sticky footer!!</p>
</footer>
);
export default Footer;
|
CSS
body {
margin : 0 ;
padding : 0 ;
height : 1000px ;
}
.App {
color : #228b22 ;
text-align : center ;
}
.footer {
background-color : green ;
border-top : 2px solid red ;
position : fixed ;
width : 100% ;
bottom : 0 ;
color : white ;
font-size : 25px ;
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...