113

I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?

Josh KG
  • 5,050
  • 3
  • 20
  • 24
stdcerr
  • 13,725
  • 25
  • 71
  • 128

7 Answers7

272

To get a footer that sticks to the bottom of your viewport, give it a fixed position like this:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap includes this CSS in the Navbar > Placement section with the class fixed-bottom. Just add this class to your footer element:

<footer class="fixed-bottom">

Bootstrap docs: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Kirill Taletski
  • 388
  • 2
  • 6
Josh KG
  • 5,050
  • 3
  • 20
  • 24
  • This and @Daniel-Tero's comment did it for me. – jmng Sep 11 '18 at 16:54
  • 8
    If a page has scrolling, it is not working properly. – Arnab Feb 26 '19 at 18:23
  • 6
    `fixed-bottom` didn't do what I was expecting, I did instead `static-bottom` to respect the page content height. – Gjaa Sep 27 '19 at 18:40
  • 1
    If the body of the page is tall enough to have scrolling content, that the body overlaps the footer. How can I prevent this overlapping? – Phantom Lord Aug 29 '21 at 18:46
  • give the footer a non-transparent background-color and a border-top, so the footer will be always displayed, and you can scroll far enough, so all the content will appear above your footer – eagle275 Jan 28 '22 at 10:08
91

Add this:

<div class="footer navbar-fixed-bottom">

https://stackoverflow.com/a/21604189

EDIT: class navbar-fixed-bottom has been changed to fixed-bottom as of Bootstrap v4-alpha.6.

http://v4-alpha.getbootstrap.com/components/navbar/#placement

Nicholas Kajoh
  • 1,451
  • 3
  • 19
  • 28
Siddharth Chauhan
  • 1,289
  • 8
  • 15
22

Add fixed-bottom:

<div class="footer fixed-bottom">
Carson
  • 6,105
  • 2
  • 37
  • 45
Matheus Gomes
  • 321
  • 2
  • 3
3

Add z-index:-9999; to this method, or it will cover your top bar if you have 1.

maxshuty
  • 9,708
  • 13
  • 64
  • 77
Daniel Tero
  • 31
  • 1
3

Another solution :

You can use "min-height: 80vh;".

This allows you to set the minimum height, using the viewport height.

Example with bootstrap :

<style>
main {
   min-height: 80vh;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<main class="container">
    <!-- Your page content here... -->
</main>
<footer class="footer navbar-fixed-bottom">
    <!-- Your page footer here... -->
</footer>
Compatibility :
Chrome 31+ / FireFox 31+ / Safari 7+ / Internet Expl. 9+ / Opera 29+

More information : https://developer.mozilla.org/fr/docs/Web/CSS/length

Alexandre
  • 76
  • 1
  • 7
  • 1
    Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – jasie Mar 03 '21 at 09:43
1

You can do this by wrapping the page contents in a div with the following id styling applied:

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

Worked for me.

Mr Porcupine
  • 25
  • 6
-4

You might want to check that example: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Vladimir Dimchev
  • 219
  • 3
  • 3