Skip to content
Related Articles

Related Articles

Improve Article

How to create sticky footer in ReactJS ?

  • Last Updated : 25 May, 2021

In this article, we will see how to create a sticky footer in ReactJS. A footer is an important element of a website’s design. A sticky footer sticks to the bottom of the website and signals to the user that they have reached the end of the webpage. For working with react, we have to set up the project first.

Creating 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: It will look like the following.



Example: In this example, we will design a footer, for that we will need to manipulate the App.js file and App.css as well as the Footer.js file.

Footer.js




import React from 'react';
  
const Footer = () => (
  <footer className="footer">
    <p>This is react sticky footer!!</p>
  
  </footer>
);
  
export default Footer;

App.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;
}

App.js




import React from "react";
  
// Importing the footer component
import Footer from "./Footer";
  
// Importing the styling of App component
import "./App.css";
  
const App = () => (
  <div className="App">
    <h3>GeeksforGeeks</h3>
    <h2>Sticky Footer using Reactjs!</h2>
    <Footer />
  </div>
);
  
export default App;

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :