Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Bootstrap 4 sticky footer overlaps content
See original GitHub issueI 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.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Bootstrap sticky footer overlapping content - Stack Overflow
As standard, this is expected behaviour for Bootstrap headers and footers - they stick to the top or bottom, and overlap the main...
Read more >Footer overlapping content - Material Design for Bootstrap
I want my footer to stick to the bottom but the Footer is sticking to the bottom without overlapping content. Actual behavior. Footer...
Read more >How to Create Sticky Footer in Bootstrap 4 and 5 - Devpractical
Bootstrap Fixed Footer Overlapping Content ... Sometimes, some of your content will be covered by the fixed footer. This happens if your content...
Read more >Footer is overlapping my content body - HTML & CSS - SitePoint
Make sure that, if your footer is not inside your body tags, that you specify a “padding-bottom: <amount> px;” to your body that...
Read more >Footer Content overlapping with main content - Themeco
It is overlapping to your content because of its position. The only way to give them some space between the content and the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You can use this one to fix your problem:
This seems to be a general HTML/CSS question. What is the problem in Bootstrap?