Create a Responsive Footer with ReactJS | Easy Guide for 2024

Faraz

By Faraz -

Learn how to create a responsive footer using ReactJS with this simple step-by-step guide. Perfect for beginners wanting to enhance their web development skills.

Join us on Telegram
create-a-responsive-footer-with-reactjs.webp
Read Alsohow to create a profile card for your website with html css and javascript.jpgHow to Create a Profile Card for Your Website with HTML, CSS And JavaScript

Introduction

Creating a responsive footer in ReactJS is a great way to improve the usability and look of your website. A well-designed footer not only provides essential information but also enhances the user experience. In this guide, we'll walk you through creating a stylish, responsive footer using ReactJS and Bootstrap. Whether you’re a beginner or looking to refresh your skills, this tutorial will help you build an eye-catching footer for your website.

Setup Environment

Before we start coding, make sure you have the following tools installed:

  1. Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.
  2. Create React App: We’ll use Create React App to set up our React environment. Install it using: 
    npx create-react-app footer-component
  3. Code Editor: You'll need a code editor like Visual Studio Code (VSCode) to write and manage your code.

Step-by-Step Guide

1. Create a New React Project

First, create a new React project if you haven’t already:

npx create-react-app footer-component
cd footer-component

2. Add Bootstrap, Font Awesome, and Poppins to public/index.html

Open public/index.html and include the following lines in the <head> section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">

3. Create the Footer Component

Create a new file called Footer.js in the src folder and add the following code:

import React from 'react';
import './Footer.css';

const Footer = () => {
  return (
    <div>
      {/* Footer Section */}
      <div className="container-fluid bg-dark text-white footer_bgpath pb-3">
        <div className="container">
          <div className="row">
            <div className="col-12 text-right py-5">
              <img
                src="https://www.codewithfaraz.com/favicon.ico"
                alt="img"
                className="footer_logo"
              />
            </div>
            <div className="clearfix"></div>
            <div className="col-12 col-md-4 col-lg-3">
              <h5 className="text-uppercase font-weight-bold py-3">Get In Touch</h5>
              <p className="font-weight-medium footer_contact_color">
                <i className="fa fa-map-marker-alt mr-2"></i>123 Street, New York, USA
              </p>
              <p className="font-weight-medium footer_contact_color">
                <i className="fa fa-phone-alt mr-2"></i>+012 345 67890
              </p>
              <p className="font-weight-medium footer_contact_color">
                <i className="fa fa-envelope mr-2"></i>[email protected]
              </p>
              <h6 className="mt-4 mb-3 text-white text-uppercase font-weight-bold">Follow Us</h6>
              <div className="footer-icon-container">
                <div className="text-center d-inline-block">
                  <a className="footer_social_icon" href="#">
                    <div className="vertical-middle"><i className="fa-brands fa-linkedin-in"></i></div>
                  </a>
                </div>
                <div className="text-center d-inline-block">
                  <a className="footer_social_icon" href="#">
                    <div className="vertical-middle"><i className="fa-brands fa-x-twitter"></i></div>
                  </a>
                </div>
                <div className="text-center d-inline-block">
                  <a className="footer_social_icon" href="#">
                    <div className="vertical-middle"><i className="fa-brands fa-facebook-f"></i></div>
                  </a>
                </div>
              </div>
            </div>
            <div className="col-12 col-md-3 col-lg-2">
              <h5 className="text-uppercase font-weight-bold py-3">Category</h5>
              <ul className="footer_menu">
                <li><a href="#"><i className="fa fa-angle-right"></i>   HTML</a></li>
                <li><a href="#"><i className="fa fa-angle-right"></i>   CSS</a></li>
                <li><a href="#"><i className="fa fa-angle-right"></i>   JavaScript</a></li>
                <li><a href="#"><i className="fa fa-angle-right"></i>   React</a></li>
                <li><a href="#"><i className="fa fa-angle-right"></i>   Java</a></li>
                <li><a href="#"><i className="fa fa-angle-right"></i>   Python</a></li>
                <li><a href="#"><i className="fa fa-angle-right"></i>   C#</a></li>
              </ul>
            </div>
            <div className="col-12 col-md-5 col-lg-3 position-relative">
              <h5 className="text-uppercase font-weight-bold py-3">Popular Projects</h5>
              <div className="mb-3">
                <div className="mb-2 d-flex">
                  <a className="badge text-uppercase font-weight-semi-bold p-1 mr-2" href="">React</a>
                  <span className="footer_text-body">Aug 29, 2024</span>
                </div>
                <a className="text-white yellow_hover text-uppercase font-weight-medium" href="">Lorem ipsum dolor sit amet elit. Proin vitae porta diam...</a>
              </div>
              <div className="mb-3">
                <div className="mb-2 d-flex">
                  <a className="badge text-uppercase font-weight-semi-bold p-1 mr-2" href="">Python</a>
                  <span className="footer_text-body">Aug 29, 2024</span>
                </div>
                <a className="text-white yellow_hover text-uppercase font-weight-medium" href="">Lorem ipsum dolor sit amet elit. Proin vitae porta diam...</a>
              </div>
              <div className="mb-3">
                <div className="mb-2 d-flex">
                  <a className="badge text-uppercase font-weight-semi-bold p-1 mr-2" href="">C#</a>
                  <span className="footer_text-body">Aug 29, 2024</span>
                </div>
                <a className="text-white yellow_hover text-uppercase font-weight-medium" href="">Lorem ipsum dolor sit amet elit. Proin vitae porta diam...</a>
              </div>
            </div>
            <div className="col-12 col-md-12 col-lg-4">
              <h5 className="text-uppercase font-weight-bold py-3">Last Modified Projects</h5>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
              <a href="#" className="footer_img_post_6">
                <img src="https://via.placeholder.com/480x320" alt="img" />
              </a>
            </div>
          </div>
          <div className="row justify-content-center pt-2 pb-4">
            <div className="col-12 col-md-8 col-lg-7">
              <div className="input-group">
                <span className="footer_newsletter footer_border">
                  <i className="fa fa-envelope"></i>
                </span>
                <input
                  type="text"
                  className="form-control footer_border"
                  placeholder="Enter your email..."
                />
                <a href="#" className="footer_newsletter footer_subcribe">
                  <i className="fa-regular fa-paper-plane"></i>  Subscribe
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="container-fluid footer_copyright">
        <div className="container">
          <div className="row">
            <div className="col-12 col-md-6 py-4 Reserved"> © Copyright 2024, All rights reserved.</div>
            <div className="col-12 col-md-6 text-right py-4">
              <a href="#" className="text-white px-2 yellow_hover">Home</a>
              <a href="#" className="text-white px-2 yellow_hover">About</a>
              <a href="#" className="text-white px-2 yellow_hover">Contact</a>
              <a href="#" className="text-white px-2 yellow_hover">Latest Projects</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Footer;

4. Add Custom Styles

Create a Footer.css file in the src folder and add your custom styles:

*,
:after,
:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.footer_bgpath {
  -webkit-clip-path: polygon(0 17%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 17%, 100% 0, 100% 100%, 0% 100%);
}

.footer_logo{
  width: 70px;
}

.footer_contact_color {
  color: #C9C8C8;
}

.footer_social_icon {
  height: 40px;
  width: 40px;
  display: table;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  margin-right: 10px;
  color: #777 !important;
}

.footer_social_icon:hover, .footer_social_icon:focus {
  display: table;
  color: #777;
  border: 1px solid #FFCC00 !important;
  cursor: pointer;
  border-radius: 50%;
}

.vertical-middle {
  vertical-align: middle;
  display: table-cell;
}

.footer_menu {
  list-style: none;
  padding: 0;
}

.footer_menu li>a {
  color: #fff !important;
  padding: 8px 0 !important;
  display: -webkit-box;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.footer_menu li > a:hover, .footer_menu li > a:focus {
color: #FFCC00!important;
padding: 8px 0!important;
display: -webkit-box;
margin-left: 5px;
}

.badge {
  color: #31404B;
  background-color: #FFCC00;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
}

.badge:hover{
  background-color: #CCA300;
  color: #31404B;
}

.footer_text-body {
  font-size: 12px;
  color: #777;
}

.footer_img_post_6 {
  height: 50px;
  width: 94px;
  overflow: hidden;
  margin: 10px 10px;
  display: inline-block;
}

.footer_img_post_6>img {
  width: 94px;
  height: 50px;
}

.footer_newsletter {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.25;
  color: #464a4c;
  text-align: center;
  background-color: #eceeef;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  white-space: nowrap;
  vertical-align: middle;
}

.footer_newsletter:not(:last-child) {
  border-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}


.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  color: #464a4c;
  background-color: #fff;
  background-image: none;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}


.footer_border {
  background: none !important;
  border-bottom: 2px solid #fff !important;
  border-top: 0px solid #fff !important;
  box-shadow: none !important;
  color: #fff !important;
}

.footer_subcribe {
  background: #FFCC00 !important;
  border-bottom: 2px solid #fff !important;
  border-top: 0px solid #fff !important;
  box-shadow: none !important;
  color: #31404B !important;
  display: -webkit-box !important;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.footer_copyright {
  background: #000 !important;
  color: #fff !important;
}

.yellow_hover:hover{
  color: #FFCC00 !important;
}

5. Use the Footer Component

In your src/App.js file, import and use the Footer component:

import React from 'react';
import Footer from './Footer';

function App() {
    return (
        <div className="App">
            <Footer />
        </div>
    );
}

export default App;

Conclusion

By following this guide, you’ve created a responsive footer using ReactJS that looks great on any device. The footer includes sections for contact information, social media links, and recent projects, all styled using Bootstrap and custom CSS. Feel free to customize it further to suit your needs.

Footer Live Demo ⟶

Read Alsousing tailwind css to build accessible and responsive card component.jpgUsing Tailwind CSS to Build Accessible and Responsive Card Component

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: responsive footer reactjs tutorial, create footer with reactjs, responsive footer design reactjs, reactjs footer, responsive footer footer design
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺