I'm new to Bootstrap, and I'm trying to use it with Symfony2. I already have a main topbar sticky which is used for navigation. My problem is when I try to add a similar footer which is sticky at the bottom, but it overlaps my content. I'm using a JQuery script to avoid the problem for the top navbar, like this:
$(document).ready(function(){ $(document.body).css('padding-top', $('#topnavbar').height()); $(window).resize(function(){ $(document.body).css('padding-top', $('#topnavbar').height()); }); });
The structure of my main Twig layout is like this:
<div class="navbar navbar-default navbar-fixed-top" id="topnavbar"> <div class="container-fluid"> </div> </div> {% block body %} {% endblock %} <footer class="footer navbar-fixed-bottom"> </footer>
My CSS is original. I tried with margin bottom
or padding bottom
but the overlapping of my content (in the {% block body %}) is always present, and I don't know what to do to fix it. Does anyone have an idea?
The only way to give them some space between the content and the footer is to remove that custom css and then add a bottom padding in the last section element. Right now, the bottom padding is 0 which is why it is close or overlapping to the footer.
Make Footer Sticky To make your footer stick to the bottom of the viewport, add classes d-flex , flex-column , and h-100 to the body tag. Also add class h-100 to <html> tag.
Method 2: (fixed height footer) Apply display:flex and flex-direction:column to the body . Apply margin-top:auto the footer . You're done, because auto margins inside flex containers absorb all available free space, making the footer stick to the bottom.
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
This is an older topic with no answer selected.
I am on a fresh Bootstrap template, porting his current theme to Bootstrap section by section :)
I have a sticky header, and want the footer locked to the bottom at ALL times. I had it working, but when I re-sized it to view it responsive, the footer overlapped the content. I needed a padding/space between the "content" and the "footer" so it didn't look mushed together.
margin-bottom on the body tag did not work, it added a gap below my footer. When you think about how a margin behaves on the "body" tag, that only makes sense.
The correct answer is to use "padding-bottom" on the body tag. I used a size 6 pixels larger than the height of my footer to ensure this small padding/spacing.
body { padding-bottom: 120px; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 114px; }
Your heights would be different of course. Hope this helps!
As standard, this is expected behaviour for Bootstrap headers and footers - they stick to the top or bottom, and overlap the main content. The solution for footers is to add margin-bottom: [footer height];
to the body
, as in the customisation example on the Bootstrap site:
sticky-footer.css
body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; }
You mention margin-bottom
in your question, so if that doesn't work for you maybe you could post what you actually tried?
P.S. This is probably nothing to do with Symfony!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With