Fixed footer in Bootstrap

html css twitter-bootstrap footer
stdcerr picture stdcerr · Oct 12, 2013 · Viewed 325k times · Source

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?

Answer

Josh KG picture Josh KG · Oct 12, 2013

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

Related questions

Bootstrap 3 Flush footer to bottom. not fixed

I am using Bootstrap 3 for a site I am designing. I want to have a footer like this sample. Sample Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it …

Read More
Bootstrap div stretch to bottom of page

I have the default bootstrap template setup, and my problem is that there is white space between a div and the footer. The white space is caused by not having enough content to fill up the entire page, so the …

Read More
Sticky footer with variable height in bootstrap

I am trying to get a sticky footer with a custom height on my website and it is proving far more difficult then I had anticipated. Here is a screen shot of my footer at the moment: The footer is …

Read More