Bootstrap footer at the bottom of the page

Question

I have read a lot of posts about this but I still didn\'t find an answer. I have a footer that I want to be at the end of the page, not fixed. The problem is th

Answer 1

When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:

    
HEADER
    CONTENT
    

Please check the examples: Bootstrap 4 Bootstrap 5

In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.

body {
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding-bottom: 100px; //height of the footer
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  height: 100px;
}

Please check this example: Bootstrap 3