How to push fixed-bottom footer in bootstrap 4 below the page content?

Question

I am using fixed-bottom class in boostrap 4 to keep the footer at bottom when there is no content or if the content is less than full page. Below is the CSS from bootstrap 4 for fixed-bottom class:

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

My footer looks like:

<footer class=" fixed-bottom  container">
  <div class="row">
    <div class="col-md-5">
      some content
    </div>
    <div class="col-md-7">    
      some content
    </div>
  </div>
</footer>

CSS for footer:

footer {
    margin-top: 25px;
}

Footer is nicely positioned at bottom but if a user clicks a link that loads content that does not fit within the empty space on page, scrollbar appears and footer remains sticky on top of content obscuring content. How can I move the footer below the content using CSS while keeping the class fixed-bottom on footer? Footer should become visible when the user scrolls to the bottom of page.

Note that footer content is wider than the page content so trying to play with z index will not work.

Answer 1

Just add the mb-5 class (margin bottom 5) to the div above the footer :)

No need to use extra css code for things that are already built in Bootstrap.

Check out the info about spacing here

Answer 2

Update your CSS to this.

.fixed-bottom {
    position: fixed;
    margin: auto;
    height: 100px;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

Remove

footer {
    margin-top: 25px;
}