How to create a sticky footer in Bootstrap 3

With or without a top nav, it is very common for sites to have a sticky footer. Bootstrap has a facility to easily create fixed footers, but no such facility for creating sticky footers – there is a big difference. Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.

Ironically, the Bootstrap documentation page itself has a sticky footer, with custom css (and a fixed top navbar). So one obvious route might be to take and refactor their documentation styling.

Problem:

(Thanks Softlayer – for the graphics)

A non-sticky footer is pretty ugly

Desired Solution:

A sticky footer is always at the bottom

Of course the footer should be responsive and cross-browser friendly as well…

Leave a Reply