How to create sticky footer in ReactJS ?

0 0 1 minute read

Creating a sticky footer 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.

For working with ReactJS, 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

Javascript

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

App.css

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

Javascript

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>zambiatek</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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!