CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfooter
stdcerr
stdcerr

Reputation: 15608

Fixed footer in Bootstrap

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?

Upvotes: 119

Views: 479798

Answers (7)

Matheus Gomes
Matheus Gomes

Reputation: 411

Add fixed-bottom:

<div class="footer fixed-bottom">

Upvotes: 31

Alexandre
Alexandre

Reputation: 86

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

Upvotes: 4

Josh KG
Josh KG

Reputation: 5140

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

Upvotes: 281

Mr Porcupine
Mr Porcupine

Reputation: 25

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.

Upvotes: 1

Siddharth Chauhan
Siddharth Chauhan

Reputation: 1327

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

Upvotes: 93

Daniel Tero
Daniel Tero

Reputation: 31

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

Upvotes: 3

Vladimir Dimchev
Vladimir Dimchev

Reputation: 219

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

Upvotes: -4

Related Questions