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

Tags:

Css

Twitter Bootstrap

Flexbox

Recent Posts