Menu
I'm trying to use this sticky footer:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
But it messes up the rendering at the < 768px widths.
Any simple css fix to get it work for all resolutions?
http://jsfiddle.net/2xvv5mod/
969
Adding vertical height worked for me
<body class="d-flex flex-column min-vh-100">
<nav>this is text</nav>
<main class="flex-grow-1">this is text</main>
</footer>this is text</footer>
</body>
Bootstrap 4 now uses flexbox by default so it's easier to get a sticky (not fixed) footer w/o additional CSS for the flexbox. You just need to ensure the body has min-height...
body {
min-height: 100vh;
}
Then use the flexbox utility classes...
<body class="d-flex flex-column">
<nav></nav>
<main class="flex-grow"></main>
</footer></footer>
</body>
Bootstrap 4 Flexbox Sticky Footer
34
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
