by Sai gowtham

How to create a sticky footer in React

In this tutorial, we are going to learn about how to create a sticky footer in React.

Inside your react app create a new file called footer.js and add the below code.

footer.js
import React from "react";

const Footer = () => (
  <div className="footer">
    <p>This is some content in sticky footer</p>
  </div>
);

export default Footer;

In the above code, we have the <Footer> Component with div and p elements where footer class is added to the div element.

Now, let’s make the footer sticky by adding CSS styles to the footer class inside index.css file.

index.css
.footer{
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgb(235, 195, 64);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

At final, we need to add our <Footer> component to the App.js file by importing it.

App.js
import React from 'react';
import Footer from './footer'
const App = ()=>{
   return (
       <div className="App">
           <h1>Hello React</h1>
           <Footer/>       </div>
   )
}

export default App;

Sticky footer looks similar to the below image.

react sticky footer demo

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course