How to Build a Responsive, Multi-Level, Sticky Footer With Flexbox

In this tutorial, I’ll show you how to use flexbox to create a responsive, multi-level, multi-column footer that sticks to the bottom of the page, no matter what.

What We’re Going to Build

Here’s the demo we’re building. Check out the full screen version to properly appreciate its responsiveness!

Feel free to add some content to the <div class="container"></div> to see how the sticky aspect of this footer works too.

Flexbox is Great for Footers

Flexbox makes it possible to build flexible layouts that naturally adapt to different viewport sizes. Multi-level, multi-column footers are a good example of taking advantage of flexbox’s unique capabilities, specifically:

the flex-grow property allows us to stick the footer to the bottom of the page no matter what,
the flex-wrap property lets columns automatically wrap based on the viewport size of the user’s device,
the justify-content property makes it possible to display the columns in different arrangements (space-around, space-between, center, etc).

Once you’ve explored what flexbox can do for your footer layout, you’ll be free to get creative and see what is possible. Footers are the ideal place to help users continue on their journey; if they’ve reached the bottom of the page but still haven’t found what they were looking for, consider adding:

Detailed navigation
Calls to action
Newsletter signups
Social links
Reassuring proof, such as awards, commendations, (genuine) privacy badges etc.
Links for support or online help
Branding
Contact details
Perhaps a reminder of your website’s personality to raise a smile or encourage the user that it’s worth hanging around

Haswell - Multipurpose One Multi Page Template — Haswell Multi Page Template does a great job of providing users with plenty of options in its footer

Footer Structure

Although it’s also possible to create a footer with CSS grid, flexbox lets us build multiple footer levels on top of each other, where each level wraps independently. The footer we will create in this tutorial has three levels, each of which is a separate flex container:

main footer: four columns, with a newsletter signup form in the last column,
social footer: six social icons centered on the page (this level won’t wrap),
legal footer: three columns where the first two columns are positioned to the left, while the last column to the right of the screen.

In addition, the footer will also stick to the bottom of the page—even when there isn’t enough content above it. We’ll achieve this sticky effect by making the entire <body> tag a column-based flex container.

1. Set Up the HTML

Let’s start with the HTML. I’ve placed all the content into a semantic <footer> tag and the three footer levels into three <section> elements. For the social footer, I’ve used Font Awesome icon fonts.

<body>
    <div class="container"></div>
    <footer>
      <!-- Footer main -->
      <section class="ft-main">
        <div class="ft-main-item">
          <h2 class="ft-title">About</h2>
          <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Customers</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </div>
        <div class="ft-main-item">
          <h2 class="ft-title">Resources</h2>
          <ul>
            <li><a href="#">Docs</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">eBooks</a></li>
            <li><a href="#">Webinars</a></li>
          </ul>
        </div>
        <div class="ft-main-item">
          <h2 class="ft-title">Contact</h2>
          <ul>
            <li><a href="#">Help</a></li>
            <li><a href="#">Sales</a></li>
            <li><a href="#">Advertise</a></li>
          </ul>
        </div>
        <div class="ft-main-item">
          <h2 class="ft-title">Stay Updated</h2>
          <p>Subscribe to our newsletter to get our latest news.</p>
          <form>
            <input type="email" name="email" placeholder="Enter email address">
            <input type="submit" value="Subscribe">
          </form>
        </div>
      </section>
    
      <!-- Footer social -->
      <section class="ft-social">
        <ul class="ft-social-list">
          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-github"></i></a></li>
          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
        </ul>
      </section>
    
      <!-- Footer legal -->
      <section class="ft-legal">
        <ul class="ft-legal-list">
          <li><a href="#">Terms &amp; Conditions</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li>&copy; 2019 Copyright Nowrap Inc.</li>
        </ul>
      </section>
    </footer>
</body>

2. Define the Basic CSS Styles

Before getting started with the layout, let’s set up some basic CSS styles such as colors, fonts, and spacing. I’ve used the following style rules, however, you can use any other styling that matches your design.

* {
    box-sizing: border-box;
    font-family: ’Lato’, sans-serif;
    margin: 0; 
    padding: 0;
}
ul {
    list-style: none;
    padding-left: 0;
}
footer {
    background-color: #555;
    color: #bbb;
    line-height: 1.5;
}
footer a {
    text-decoration: none;
    color: #eee;
}
a:hover {
    text-decoration: underline;
}
.ft-title {
    color: #fff;
    font-family: ’Merriweather’, serif;
    font-size: 1.375rem;
    padding-bottom: 0.625rem;
}

3. Stick the Footer to the Bottom of the Page

With flexbox, we can create a sticky footer with just a couple of lines of CSS. The code below makes the entire body of the page a flex container which is at least 100% of the viewport’s height (100vh).

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.container {
    flex: 1;    /* same as flex-grow: 1; */
}

The real trick lies in the addition of the flex: 1; rule to the .container element (which is above <footer> in the HTML). The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. When it has just one value, it refers to flex-grow, with flex-shrink and flex-basis being set to their default values.

The flex-grow property defines what happens inside the flex container when there’s too much positive space (i.e. the flex items don’t span across the whole container). Its default value is 0 which means that all the remaining space will be equally allocated between the items. So, when we set flex-grow to 1, .container will get all the remaining space on the screen. At the same time, <footer> will get no extra space, so it will be automatically pushed down to the bottom of the page.

4. Line Up the Main Footer

Now, that the footer is neatly stuck to the bottom of the page, it’s time to line up the columns of the main footer.

The .ft-main element will be the flex container and the flex-wrap property will let the footer wrap into multiple rows based on the viewport size. To prevent columns being too narrow, I’ve also set a 200px minimum width for each flex item.

.ft-main {
    padding: 1.25rem 1.875rem;
    display: flex;
    flex-wrap: wrap;
}
.ft-main-item {
    padding: 1.25rem;
    min-width: 12.5rem /*200px*/;
}

The main footer doesn’t use any specific alignment properties on smaller screens. As a result, flexbox automatically aligns each column to the start of the main axis (which, in the default case, is the left of the screen).

However, on larger screens, it looks much better when space is allocated more precisely. So, I’ve set justify-content to space-around for medium-size and to space-evenly for large screens. When you are creating another footer layout, I’d recommend some experimentation with different values of justify-content so that you can see which one fits best with your design.

@media only screen and (min-width: 29.8125rem /*477px*/) {
    .ft-main {
        justify-content: space-around;
    }
}
@media only screen and (min-width: 77.5rem /*1240px*/ ) {
    .ft-main {
        justify-content: space-evenly;
    }
}

5. Style the Newsletter Form

The last column of the main footer contains a newsletter signup form which requires some extra attention. I’ve added the flexbox layout to the <form> element, too, so that the input field and the submit button will be neatly lined up on all viewports. Thanks to the flex-wrap: wrap; rule, the submit button will nicely slip below the input field when the viewport gets very small.

Besides, when the newsletter form wraps, there will also be some white space between the two elements due to the margin-top property set on the submit button. I’ve also added the same margin-top value to the input field so that flexbox will display it precisely next to the submit button on larger viewports.

form {
    display: flex;
    flex-wrap: wrap;
}
input[type="email"] {
    border: 0;
    padding: 0.625rem;
    margin-top: 0.3125rem;
}
input[type="submit"] {
    background-color: #00d188;
    color: #fff;
    cursor: pointer;
    border: 0;
    padding: 0.625rem 0.9375rem;
    margin-top: 0.3125rem;
}

6. Line Up the Social Footer

Creating the layout of the social footer is relatively simple, as it’s just an unordered list of a couple of small icons. As the icons are really small, this footer level doesn’t need to wrap. The justify-content: center; rule aligns it to the center of the main axis at every screen size.

.ft-social {
    padding: 0 1.875rem 1.25rem;
}
.ft-social-list {
    display: flex;
    justify-content: center;
    border-top: 1px #777 solid; 
    padding-top: 1.25rem;
}
.ft-social-list li {
    margin: 0.5rem;
    font-size: 1.25rem;
}

7. Line Up the Legal Footer

The legal footer contains three elements: two links on the left and a copyright notice on the right. To achieve this layout, we can use the same flexbox trick as for the sticky footer. There, we have used the flex: 1; rule on the .container element, so flexbox allocated the entire positive space to it and pushed the footer to the very bottom of the page. Here, we can do the same thing.

Although .ft-legal-list is a row-based flex container while .container is column-based, we can follow the same logic. If we set flex-grow to 1 for the second column, it will automatically push the copyright notice to the right of the screen.

On mobile viewports, everything looks nice, too. In this case, flexbox displays all three elements below each other, aligned to the left of the screen.

.ft-legal {
    padding: 0.9375rem 1.875rem;
    background-color: #333;
}
.ft-legal-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.ft-legal-list li {
    margin: 0.125rem 0.625rem;
    white-space: nowrap;
}
/* one before the last child */
.ft-legal-list li:nth-last-child(2) {
    flex: 1;       /* same as flex-grow: 1; */
}

Check Out the Demo

And, that’s all; our multi-level, multi-column, responsive, sticky footer is done! Check out the demo again to remind yourself how it looks like at different viewport sizes:

Conclusion

Flexbox allows us to create complex flexible layouts with much less code than before. Using the techniques and tricks presented in this tutorial, you can create any footer layout you want, with any number of levels and columns.

The biggest advantage of flexbox footers is that you can use different wrapping, sizing, and alignment rules for each level. As a result, you can keep the footer completely content-aware without having to use JavaScript or (many) media queries.

Learn Flexbox Basics

Flexbox syntax is varied and often confusing! Even if you’re familiar with flexbox, it’s always worth reminding yourself of the basics.