Open In App

How to create a simple Responsive Footer in React JS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

A responsive Footer in the React JS application is part of webpages that adjusts layout dynamically and signals to the user that they have reached the end of the webpage and provides useful links to other areas of the website that the user may want to visit.

Preview Image of Final Output:

Screenshot-from-2023-10-13-10-58-16

Prerequisites

Steps to create the application

Step 1: You will start a new project using create-react-app so open your terminal and type:

npx create-react-app react-footer

Step 2: Now go to your react-footer folder by typing the given command in the terminal:

cd react-footer

Step 3: Install the dependencies required in this project by typing the given command in the terminal.

npm install --save styled-components

Step 4: Now create the components folder in src then go to the components folder and create two files by the name Footer.js and FooterStyles.js

Project Structure

The file structure in the project will look like this.

Dependencies list after installing packages

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^6.0.9",
"web-vitals": "^2.1.4"
}

Example: In this example we will design a footer, for that we will need to manipulate the App.js file and other created components file. We will use Footer components from the style-components library for simple and efficient implementation of footer.

Javascript




// Filename - App.js
 
import React from "react";
import "./App.css";
import Footer from "./components/Footer.js";
function App() {
    return (
        <div>
            <div
                style={{
                    minHeight: "400px",
                    color: "green",
                }}
            >
                <h1>GeeksforGeeks</h1>
            </div>
            <Footer />
        </div>
    );
}
 
export default App;


Javascript




// components/FooterStyles.js
 
import styled from "styled-components";
 
export const Box = styled.div`
    padding: 5% 2.5%;
    background: black;
    // position: absolute;
    bottom: 0;
    width: 95%;
 
    @media (max-width: 1000px) {
        // padding: 70px 30px;
    }
`;
 
export const FooterContainer = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    /* background: red; */
`;
 
export const Column = styled.div`
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 60px;
`;
 
export const Row = styled.div`
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(185px, 1fr)
    );
    grid-gap: 20px;
 
    @media (max-width: 1000px) {
        grid-template-columns: repeat(
            auto-fill,
            minmax(200px, 1fr)
        );
    }
`;
 
export const FooterLink = styled.a`
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
    text-decoration: none;
 
    &:hover {
        color: green;
        transition: 200ms ease-in;
    }
`;
 
export const Heading = styled.p`
    font-size: 24px;
    color: #fff;
    margin-bottom: 40px;
    font-weight: bold;
`;


Javascript




// Filename - components/Footer.js
 
import React from "react";
import {
    Box,
    FooterContainer,
    Row,
    Column,
    FooterLink,
    Heading,
} from "./FooterStyles";
 
const Footer = () => {
    return (
        <Box>
            <h1
                style={{
                    color: "green",
                    textAlign: "center",
                    marginTop: "10px",
                }}
            >
                A Computer Science Portal for Geeks!
            </h1>
            <FooterContainer>
                <Row>
                    <Column>
                        <Heading>About Us</Heading>
                        <FooterLink href="#">
                            Aim
                        </FooterLink>
                        <FooterLink href="#">
                            Vision
                        </FooterLink>
                        <FooterLink href="#">
                            Testimonials
                        </FooterLink>
                    </Column>
                    <Column>
                        <Heading>Services</Heading>
                        <FooterLink href="#">
                            Writing
                        </FooterLink>
                        <FooterLink href="#">
                            Internships
                        </FooterLink>
                        <FooterLink href="#">
                            Coding
                        </FooterLink>
                        <FooterLink href="#">
                            Teaching
                        </FooterLink>
                    </Column>
                    <Column>
                        <Heading>Contact Us</Heading>
                        <FooterLink href="#">
                            Uttar Pradesh
                        </FooterLink>
                        <FooterLink href="#">
                            Ahemdabad
                        </FooterLink>
                        <FooterLink href="#">
                            Indore
                        </FooterLink>
                        <FooterLink href="#">
                            Mumbai
                        </FooterLink>
                    </Column>
                    <Column>
                        <Heading>Social Media</Heading>
                        <FooterLink href="#">
                            <i className="fab fa-facebook-f">
                                <span
                                    style={{
                                        marginLeft: "10px",
                                    }}
                                >
                                    Facebook
                                </span>
                            </i>
                        </FooterLink>
                        <FooterLink href="#">
                            <i className="fab fa-instagram">
                                <span
                                    style={{
                                        marginLeft: "10px",
                                    }}
                                >
                                    Instagram
                                </span>
                            </i>
                        </FooterLink>
                        <FooterLink href="#">
                            <i className="fab fa-twitter">
                                <span
                                    style={{
                                        marginLeft: "10px",
                                    }}
                                >
                                    Twitter
                                </span>
                            </i>
                        </FooterLink>
                        <FooterLink href="#">
                            <i className="fab fa-youtube">
                                <span
                                    style={{
                                        marginLeft: "10px",
                                    }}
                                >
                                    Youtube
                                </span>
                            </i>
                        </FooterLink>
                    </Column>
                </Row>
            </FooterContainer>
        </Box>
    );
};
export default Footer;


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:

Peek-2023-10-13-10-55



Last Updated : 13 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads