Advertisement
Advertisement



Question

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?

2016/07/05
1
80
7/5/2016 10:58:54 PM

Accepted Answer

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

2020/05/09
197
5/9/2020 8:01:17 PM


Add this:

<div class="footer fixed-bottom">
2019/11/14

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

2016/12/02

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.

2020/04/02

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

2014/01/15