asked on

Bootstrap 4 sticky footer

I am using bootstrap 4. My bottom footer I am having an issue making it sticky at the bottom.

CSS:

  .footer {
    position: relative;
    bottom: 0;
    height: 60px;
    width: 100%;
    padding-top:20px;
    background-color: #214761;
    color: #FFFFFF;
  }

Open in new window

If I set the position to absolute the footer is at the bottom but longer content will go past the footer.

My page starts with a <nav> ... </nav> followed by a <div class="container"> ... content ... </div> then followed by <footer> ... </footer>

Jim Riddles

The easiest way that I have found to make footers sticky is to set a fixed height on the footer, whatever you choose is fine. Then, set the footer position to absolute, and add padding to the bottom of your BODY tag equal to the height of your footer. Something like below:

body { padding-bottom: 60px; }
.footer {
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
  padding-top:20px;
  background-color: #214761;
  color: #FFFFFF;
}

Open in new window

Robert Saylor

ASKER

Thanks, that appeared logical to me and it went to the bottom but when I adjusted the responsiveness the content scrolled past the footer. I will keep playing with it. I think it is a bootstrap 4 thing never had this much trouble with bootstrap 3.

Jim Riddles

There is also a Bootstrap class called "fixed-bottom" that you can apply to your footer, and ignore the rules in your .footer class for position. Maybe instead of using padding-bottom for the body, you can try margin-bottom? Not sure if that will make a ton of difference. Note, that your content WILL always scroll beyond your footer, if there is more page content. What the bottom padding or margin does is ensure that once you have scrolled to the bottom of your page, that the content is not covered up by your footer.

Where is your footer element at, respective to the rest of your HTML? I would suggest you add it outside of your enclosing container, as that may help, as well.

Robert Saylor

ASKER

Thanks Jim, will give that a try. When I said scroll past I meant the content overlays on top of the footer when I change the window size.

Jim Riddles

Oh, then one last step is to assign a z-index to your footer element that is higher than the rest of the content. Try something like the following:

body { padding-bottom: 60px; }
.footer {
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
  padding-top:20px;
  background-color: #214761;
  color: #FFFFFF;
  z-index:1000;
}

Open in new window

Robert Saylor

ASKER

Thanks, still had the same issue. I found this and it resolved my issue.

https://stackoverflow.com/questions/50210761/how-to-push-fixed-bottom-footer-in-bootstrap-4-below-the-page-content

ASKER CERTIFIED SOLUTION

Robert Saylor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jim Riddles

I'm not sure that you were asking the same question as the link you pointed to. In that one, the user apparently did not want the footer to appear on the page, if the page content was greater than the available space. However, I am glad that you found a solution to your problem.