Skip to Content

How to Create a Collapsible Footer

Don't neglect the small elements of building a mobile-responsive website. Here's how to craft a collapsible footer to improve your visitors' navigation regardless of what screen they use.

Responsive websites are no longer design trends; they’re necessities. With over half of web users accessing the internet via smartphone rather than desktop, websites that don’t look function on mobile simply won’t survive. In fact, most websites are now being designed with mobile-first usage in mind. And ensuring your site works on a smartphone as well as it does on desktop is also now a bigger ranking priority for Google than it has been in previous years.

Most websites do a decent job of making sure their website is responsive from stem to stern, but even the best web pages can sometimes forget about one critical part -- the footer. Here’s a quick and easy tutorial using simple Bootstrap, HTML and SCSS.


The HTML relies heavily on some standard bootstrap classes, particularly 'collapse' and 'accordion' for its responsive functionality:


Just a handful of lines of SCSS will customize the collapsible columns:

Try this out for your own website! Before you code, be sure to check out the finished product on the JSFiddle below. To see exactly how it responds, adjust the browser's window size to a variety of widths. Stretch it or shrink it however you want and see what this code could do for your website. 

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.