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

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 & Conditions</a></li> <li><a href="#">Privacy Policy</a></li> <li>© 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.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post