Using flexbox sticky footer with bootstrap
You need to give the flexbox item a width
of 100%
.
In this case, that would be that .content
element:
Updated Example
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
@media only screen and (max-width: 768px) {
.content {
width: 100%;
}
}
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