How to Create a Responsive Website Footer
In this detailed web development tutorial, I'll teach you how to create a responsive website footer using HTML, CSS, and JavaScript.
The beginning and the end of your web page are both important elements that serve to frame the main content in between. Most web developers put a great deal of thought into to designing the header and banner that appear at the beginning of the page. But the end of the page, though equally important, is often overlooked.
This area is called the footer, and it's a key element that lets visitors know that the end of your page is not the end of their journey.
So what exactly is a footer? Simply stated, a footer is the conclusion to your website. Typically located along the bottom of each page, it supplements the main content area with additional information and actions that visitors may take.
A footer may include:
- Copyright information
- Links to internal and external pages (site navigation, partners, sponsors, resources, etc.)
- Links to connect and share on social media
- Links to technical and legal information (sitemap, terms of service, privacy policy, etc.)
- Fields and buttons to send a message or subscribe
- Contact information (map, address, phone number, email, etc.)
- Testimonials
- A call-to-action (CTA) button
This article, which is part of a series of Web Development tutorials, will guide you through the process of creating a website footer. We'll use HTML, CSS, and JavaScript to construct four footer layouts - Footer with Copyright, Footer with Back-to-Top Button, Footer with Link Menu, and Footer with Subscription and Social Media Bars. With each example, we’ll examine a complete web page demonstration before taking a detailed look at the concepts and code that bring it to life.
This article builds upon topics discussed in How to Create a Responsive Website Layout.
In this article, we'll use our standard HTML Document Structure and CSS Naming Convention.
Skip Ahead
Looking for something specific? Select a topic in this article to read more:
Footer with Copyright
In our first example, we'll construct a simple footer with a copyright:
A footer with a copyright is a simple and common design that declares the owner of the intellectual property contained within the website.
Let's start with the HTML used to create our responsive footer with a copyright:
HTML
<!-- Footer -->
<footer class="footer">
<p class="page footer_text">
© 2003-2023 Me</p>
</footer>
First we create our footer area using the
<footer>
element and assign it:
-
The
class="footer"attribute to control the style of the footer area
Inside the footer area we create our footer text using the
<p>
element and assign it:
-
The
class="page footer_text"attribute to control the layout and style of the footer text
Next the CSS:
CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
/* Page */
.page {
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 960px) {
.page {max-width: 960px;}
}
/* Footer */
.footer {background: #4040BF;}
.footer_text {
padding: 16px;
font: 16px / 1.5 'Open Sans', sans-serif;
text-align: center;
color: #FFFFFF;
}
First we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.
Next we create the
.page
CSS rule to control the layout of our page area so that:
- The maximum width is 640px on small and medium screens
- The maximum width is 960px on large screens
Then we create the
.footer
CSS rule to control the style of our footer area.
Finally we create the
.footer_text
CSS rule to control the style of our footer text.
And there you have it! A responsive footer with a copyright.
The demonstration provided expands upon this code to show the footer in a complete web page environment.
To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.
To customize the demonstration, first save a local copy of the document on your computer. Then open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.
Footer with Back-to-Top Button
In our second example, we'll build upon our Footer with Copyright design to include a back-to-top button:
A footer with a back-to-top button allows visitors to return to the beginning of our page without having to manually scroll through the entire document.
The construction of the footer with a back-to-top button is similar to our Footer with Copyright design. But we add:
- HTML, CSS, and JavaScript to create the back-to-top button
Let's start with the HTML used to create our responsive footer with a back-to-top button:
HTML
<body id="top">
...
<!-- Footer -->
<footer class="footer">
<div class="page footer_container">
<p class="footer_text">
© 2003-2023 Me</p>
<a href="#top"
class="footer_button">
<i class="footer_button_icon fa fa-chevron-up"></i></a>
</div>
</footer>
</body>
First we modify the
body
element.
We add:
-
The
id="top"attribute to provide a destination for the back-to-top button
Next we create our footer area using the
<footer>
element and assign it:
-
The
class="footer"attribute to control the style of the footer area
Inside the footer area we create our footer container using the
<div>
element and assign it:
-
The
class="page footer_container"attribute to control the layout of the footer container
The first item inside the footer container is our footer text.
We create this item using the
<p>
element and assign it:
-
The
class="footer_text"attribute to control the style of the footer text
The second item inside the footer container is our back-to-top button.
We use the
<a>
element to create a footer button that scrolls visitors to the top of our page when clicked.
We assign it:
-
The
href="#top"attribute to specify the destination of the footer button -
The
class="footer_button"attribute to control the layout and style of the footer button
Inside the footer button we create our footer button icon using the
<i>
element and assign it:
-
The
class="footer_button_icon fa fa-chevron-up"attribute to control the style of the footer button icon
Next the CSS:
CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
/* Page */
.page {
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 960px) {
.page {max-width: 960px;}
}
/* Footer */
.footer {background: #4040BF;}
.footer_container {
position: relative;
padding: 0 48px;
}
.footer_text {
padding: 16px;
font: 16px / 1.5 sans-serif;
text-align: center;
color: #FFFFFF;
}
.footer_button {
display: block;
position: absolute;
right: 0;
top: 0;
padding: 16px;
font: 16px / 1.5 sans-serif;
text-align: center;
color: #FFFFFF;
}
.footer_button_icon {width: 16px;}
First we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.
Next we create the
.page
CSS rule to control the layout of our page area so that:
- The maximum width is 640px on small and medium screens
- The maximum width is 960px on large screens
Then we create the
.footer
CSS rule to control the style of our footer area.
Next we create the
.footer_container
CSS rule to control the layout of our footer container.
We include:
-
The
position: relative;property to allow the footer button to be positioned relative to the footer container -
The
padding: 0 48px;property to prevent the footer text and footer button from overlapping
Then we create the
.footer_text
CSS rule to control the style of our footer text.
Next we create the
.footer_button
CSS rule to control the layout and style of our footer button.
We include:
-
The
position: absolute; right: 0; top: 0;properties to position the footer button in the top-right corner of the footer container
Finally we create the
.footer_button_icon
CSS rule to control the style of our footer button icon.
Now the JavaScript:
JavaScript
// Smooth Scrolling
$('a').click(function() {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Here we create some JavaScript code (using jQuery) that allows our back-to-top button to smoothly scroll to the beginning of the page when clicked. Including this code is entirely optional. It simply provides an improved user experience for visitors with JavaScript-enabled devices.
And there you have it! A responsive footer with a back-to-top button.
The demonstration provided expands upon this code to show the footer in a complete web page environment. It also includes extra features like tooltips and hover states.
To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.
To customize the demonstration, first save a local copy of the document on your computer. Then open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.
Footer with Link Menu
In our third example, we'll construct a footer with a link menu:
A footer with a link menu provides visitors with additional actions that they may take once they've reached the end of our page. Links may supplement the site navigation menu within our header and direct visitors to pages that are internal to our website. Links may also direct visitors to related pages that are external to our website.
Let's start with the HTML used to create our responsive footer with a link menu:
HTML
<!-- Footer -->
<footer class="footer">
<div class="page grid footer_container">
<section class="grid_mod-sm-12 grid_mod-md-4 footer_section">
<h2 class="footer_heading">
Section</h2>
<ul class="footer_menu">
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
Footer Link</a></li>
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
Footer Link</a></li>
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
Footer Link</a></li>
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
Footer Link</a></li></ul>
</section>
...
</div>
</footer>
First we create our footer area using the
<footer>
element and assign it:
-
The
class="footer"attribute to control the style of the footer area
Inside the footer area we create our footer container using the
<div>
element and assign it:
-
The
class="page grid footer_container"attribute to control the layout of the footer container
Inside the footer container we create our footer sections using the
<section>
element and assign each:
-
The
class="grid_mod-sm-12 grid_mod-md-4 footer_section"attribute to control the layout of the footer section (100% wide on small screens and 33.33% wide on medium and large screens)
The first item inside each footer section is our footer heading.
We create this item using the
<h2>
element and assign it:
-
The
class="footer_heading"attribute to control the style of the footer heading
The second item inside each footer section is our footer menu.
We create this item using the
<ul>
element and assign it:
-
The
class="footer_menu"attribute to control the layout of the footer menu
Inside the footer menu we create our footer menu items using the
<li>
element and assign each:
-
The
class="footer_menu_item"attribute to control the layout and style of the footer menu item
And inside each footer menu item we use the
<a>
element to create a footer menu link that directs visitors to the corresponding page when clicked.
We assign each:
-
The
href="#"attribute to specify the destination of the footer menu link -
The
class="footer_menu_link"attribute to control the style of the footer menu link
Next the CSS:
CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
/* Page */
.page {
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 960px) {
.page {max-width: 960px;}
}
/* Grid */
.grid {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.grid_mod-sm-12 {
flex: 0 0 auto;
width: 100%;
}
@media (min-width: 480px) {
.grid_mod-md-4 {
flex: 0 0 auto;
width: 33.33%;
}
}
/* Footer */
.footer {background: #000000;}
.footer_container {padding: 48px 0;}
.footer_section {padding: 8px;}
.footer_heading {
padding: 8px;
font: bold 16px / 1.5 sans-serif;
text-align: center;
color: #9F9FDF;
}
.footer_menu {padding: 8px;}
.footer_menu_item {
display: block;
font: 16px / 1.5 sans-serif;
text-align: center;
}
.footer_menu_link {color: #FFFFFF;}
First we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.
Next we create the
.page
CSS rule to control the layout of our page area so that:
- The maximum width is 640px on small and medium screens
- The maximum width is 960px on large screens
Then we create the
.grid
CSS rule to construct a grid container that is:
- Center-aligned on all screens
Next we create the
.grid_mod-sm-12
CSS rule to construct a grid module that is:
- 100% wide on small screens
Then we create the
.grid_mod-md-4
CSS rule to construct a grid module that is:
- 33.33% wide on medium and large screens
Next we create the
.footer
CSS rule to control the style of our footer area.
Then we create the
.footer_container
CSS rule to control the layout of our footer container.
Next we create the
.footer_section
CSS rule to control the layout of our footer sections.
Then we create the
.footer_heading
CSS rule to control the style of our footer headings.
Next we create the
.footer_menu
CSS rule to control the layout of our footer menus.
Then we create the
.footer_menu_item
CSS rule to control the layout and style of our footer menu items.
Finally we create the
.footer_menu_link
CSS rule to control the style of our footer menu links.
And there you have it! A responsive footer with a link menu.
The demonstration provided expands upon this code to show the footer in a complete web page environment. It also includes extra features like hover states.
To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.
To customize the demonstration, first save a local copy of the document on your computer. Then open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.
Footer with Subscription and Social Media Bars
In our fourth example, we'll construct a footer with subscription and social media bars:
A footer with subscription and social media bars allows visitors to connect with us and promote our website. When a visitor submits their email address, it is sent to our inbox. We are then able to send them exclusive content. When a visitor clicks on a social media link, our website is automatically shared to the corresponding platform.
The subscription form requires server-side PHP script to function, which is beyond the scope of this tutorial. Here we will focus our demonstration on the HTML structure and CSS styling of the subscription form.
Let's start with the HTML used to create our responsive footer with subscription and social media bars:
HTML
<!-- Footer -->
<footer class="footer">
<div class="page footer_container">
<section class="footer_section">
<h2 class="footer_heading">
Subscribe</h2>
<form class="footer_subscribe">
<div class="footer_subscribe_container">
<input type="email"
class="footer_subscribe_input">
<button type="submit"
class="footer_subscribe_button">
<i class="footer_subscribe_icon fa fa-chevron-right"></i></button></div></form>
</section>
<section class="footer_section">
<h2 class="footer_heading">
Follow</h2>
<ul class="footer_menu">
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
<i class="footer_menu_icon fa fa-facebook-square"></i></a></li>
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
<i class="footer_menu_icon fa fa-twitter-square"></i></a></li>
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
<i class="footer_menu_icon fa fa-pinterest-square"></i></a></li>
<li class="footer_menu_item">
<a href="#"
class="footer_menu_link">
<i class="footer_menu_icon fa fa-linkedin-square"></i></a></li></ul>
</section>
</div>
</footer>
First we create our footer area using the
<footer>
element and assign it:
-
The
class="footer"attribute to control the style of the footer area
Inside the footer area we create our footer container using the
<div>
element and assign it:
-
The
class="page footer_container"attribute to control the layout of the footer container
The first item inside the footer container is our "Subscribe" footer section.
We create this item using the
<section>
element and assign it:
-
The
class="footer_section"attribute to control the layout of the footer section
The first item inside the "Subscribe" footer section is our footer heading.
We create this item using the
<h2>
element and assign it:
-
The
class="footer_heading"attribute to control the style of the footer heading
The second item inside the "Subscribe" footer section is our subscription bar.
We create this item using the
<form>
element and assign it:
-
The
class="footer_subscribe"attribute to control the layout of the subscription bar
Inside the subscription bar we create our subscription container using the
<div>
element and assign it:
-
The
class="footer_subscribe_container"attribute to control the layout of the subscription container
The first item inside the subscription container is our email input.
We create this item using the
<input>
element and assign it:
-
The
type="email"attribute to specify that the expected type of input is an email address -
The
class="footer_subscribe_input"attribute to control the layout and style of the email input
The second item inside the subscription container is our subscription button.
We create this item using the
<button>
element and assign it:
-
The
type="submit"attribute to specify that the button submits the form data when clicked -
The
class="footer_subscribe_button"to control the layout and style of the subscription button
Inside the subscription button we create our subscription icon using the
<i>
element and assign it:
-
The
class="footer_subscribe_icon fa fa-chevron-right"attribute to control the style of the subscription icon
The second item inside the footer container is our "Share" footer section.
We create this item using the
<section>
element and assign it:
-
The
class="footer_section"attribute to control the layout of the footer section
The first item inside the "Share" footer section is our footer heading.
We create this item using the
<h2>
element and assign it:
-
The
class="footer_heading"attribute to control the style of the footer heading
The second item inside the "Share" footer section is our footer menu.
We create this item using the
<ul>
element and assign it:
-
The
class="footer_menu"attribute to control the layout of the footer menu
Inside the footer menu we create our footer menu items using the
<li>
element and assign each:
-
The
class="footer_menu_item"attribute to control the layout and style of the footer menu item
Inside each footer menu item we use the
<a>
element to create a footer menu link that shares our website to the corresponding social media platform when clicked.
We assign each:
-
The
href="..."attribute to specify the destination of the footer menu link -
The
class="footer_menu_link"attribute to control the style of the footer menu link
And inside each footer menu link we create our footer menu icon using the
<i>
element and assign each:
-
The
class="footer_menu_icon fa ..."attribute to control the style of the footer menu icon
Next the CSS:
CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
/* Page */
.page {
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 960px) {
.page {max-width: 960px;}
}
/* Footer */
.footer {background: #808080;}
.footer_container {padding: 48px 0;}
.footer_section {padding: 8px;}
.footer_heading {
padding: 8px;
font: bold 16px / 1.5 sans-serif;
text-align: center;
color: #CFCFEF;
}
.footer_menu {
font-size: 0;
text-align: center;
}
.footer_menu_item {
display: inline-block;
padding: 8px;
font: 32px / 1.5 sans-serif;
}
.footer_menu_link {color: #FFFFFF;}
.footer_menu_icon {width: 32px;}
.footer_subscribe {
margin: 0 auto;
padding: 8px;
}
.footer_subscribe_container {position: relative;}
.footer_subscribe_input {
width: 100%;
height: 40px;
border-radius: 20px;
padding: 8px 48px 8px 16px;
font: 16px / 1.5 sans-serif;
color: #404040;
background: #FFFFFF;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
}
.footer_subscribe_button {
width: 48px;
height: 40px;
position: absolute;
right: 0;
top: 0;
padding: 8px 16px;
font: 16px / 1.5 sans-serif;
color: #000000;
background: transparent;
cursor: pointer;
}
.footer_subscribe_icon {width: 16px;}
@media (min-width: 480px) {
.footer_subscribe {width: 50%;}
}
First we create a CSS rule to control the default layout and style of all elements (unless otherwise specified). This rule applies the "border box" sizing model and resets margins, borders, and padding to 0.
Next we create the
.page
CSS rule to control the layout of our page area so that:
- The maximum width is 640px on small and medium screens
- The maximum width is 960px on large screens
Then we create the
.footer
CSS rule to control the style of our footer area.
Next we create the
.footer_container
CSS rule to control the layout of our footer container.
Then we create the
.footer_section
CSS rule to control the layout of our footer sections.
Next we create the
.footer_heading
CSS rule to control the style of our footer headings.
Then we create the
.footer_menu
CSS rule to control the layout of our footer menu.
We include:
-
The
font-size: 0;property to prevent browsers from adding undesirable whitespace around and between the footer menu items (font size is redefined later so that all text is rendered to the correct size)
Next we create the
.footer_menu_item
CSS rule to control the layout and style of our footer menu items.
Then we create the
.footer_menu_link
CSS rule to control the style of our footer menu links.
Next we create the
.footer_menu_icon
CSS rule to control the style of our footer menu icons.
Then we create the
.footer_subscribe
CSS rule to control the layout of our subscription bar.
Note that the subscription bar changes to 50% wide on medium and large screens.
Next we create the
.footer_subscribe_container
CSS rule to control the layout of our subscription container.
We include:
-
The
position: relative;property to allow the subscription button to be positioned relative to the subscription container
Then we create the
.footer_subscribe_input
CSS rule to control the layout and style of our subscription input.
We include:
-
The
padding: 8px 48px 8px 16px;property to prevent the subscription input text and subscription button from overlapping
Next we create the
.footer_subscribe_button
CSS rule to control the layout and style of our subscription button.
We include:
-
The
position: absolute; right: 0; top: 0;properties to position the subscription button in the top-right corner of the subscription container
Finally we create the
.footer_subscribe_icon
CSS rule to control the style of our subscription icon.
And there you have it! A responsive footer with a subscription and share menu.
The demonstration provided expands upon this code to show the footer in a complete web page environment. It also includes extra features like tooltips and hover states.
To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.
To customize the demonstration, first save a local copy of the document on your computer. Then open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.