Bootstrap: Bootstrap 4 sticky footer overlaps content

Created on 3 Jun 2018 · 6Comments · Source: twbs/bootstrap

I am using Bootstrap 4 for adding sticky footer which have two components : bottom bar(using container-fluid) with copyright year and website name and sub-footer navigation menu(using container element) which have sitemap and other links.

Here is my css

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 40px;
  height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.footer .container-fluid {
  height: 40px;
}

.footer .container {
  padding-top: 20px;
}

Whenever I remove those two last footer sub classes and add height:40px; to footer, there is no overlapping of content but a page shows vertical scrollbar even with less content on page.

css v4

Source

arinsinc

Most helpful comment

You can use this one to fix your problem:

<body class="d-flex flex-column" style="min-height: 100vh">
 <main class="flex-fill"></main>
<footer></footer>
</body>

Ghost180195 on 4 Jun 2018

👍19 ❤3 🚀2 👀1 👎1

All 6 comments

same problem..

muhannadsnan on 4 Jun 2018

You can use this one to fix your problem:

<body class="d-flex flex-column" style="min-height: 100vh">
 <main class="flex-fill"></main>
<footer></footer>
</body>

Ghost180195 on 4 Jun 2018

👍19 ❤3 🚀2 👀1 👎1

This seems to be a general HTML/CSS question. What is the problem in Bootstrap?

ysds on 5 Jun 2018

👍2

With bootstrap 4, the content is always shifted up and behind the navbar. So, you need to fix that youself everytime with pure css, which is irritating!! There must be a correct way of doing this.

muhannadsnan on 5 Jun 2018

OK I understand. The Bootstrap sticky footer example is using specific size value (60px). Hopefully the specific size can be removed by using flexbox.

ysds on 5 Jun 2018

👍1

Flexbox based sticky footer solve this issue

arinsinc on 11 Jun 2018

Was this page helpful?

0 / 5 - 0 ratings