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.
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:
- Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.
- Create React App: We’ll use Create React App to set up our React environment. Install it using:
npx create-react-app footer-component - 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-component2. 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.
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
Create Infinite Carousel Using HTML and CSS
by Faraz - November 15, 2024Learn how to create a smooth infinite autoplay carousel using HTML and CSS. Follow our step-by-step guide to design stunning carousels for websites.
Create Marketing Hero Section using HTML and CSS
by Faraz - September 30, 2024Learn how to create a responsive marketing hero section using HTML and CSS.
Create Pop It Game using HTML, CSS, and JavaScript
by Faraz - October 08, 2024Learn how to create a fun and simple Pop It game using HTML, CSS, and JavaScript with this easy-to-follow step-by-step guide for beginners.
Tooltip Hover to Preview Image with Tailwind CSS
by Faraz - August 01, 2024Learn how to create a tooltip hover effect to preview images using Tailwind CSS. Follow our simple steps to add this interactive feature to your website.
Tools
Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js
January 23, 2024
Create Sticky Bottom Navbar using HTML and CSS
by Faraz - August 29, 2024Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.
