Using flexbox sticky footer with bootstrap

Question

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/

score 13 · Answer 1 · answered Mar 04 '17 at 12:42

13

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

answered Mar 04 '17 at 12:42

Carol Skelly

351,302
90
710
624

@ottz0 has the more bootstrap 4 way of achieving this. – Jogai Oct 26 '20 at 13:01
@Jogai. Thanks and there are also specifically [tag:bootstrap-4] questions on this https://stackoverflow.com/questions/45912296/bootstrap-4-sticky-footer-dynamic-footer-height/45919356#45919356 and https://stackoverflow.com/questions/46722697/bootstrap-4-sticky-footer-not-sticking/49562840#49562840 – Carol Skelly Oct 26 '20 at 13:24

Josh Crozier · Accepted Answer · 2015-02-08T01:57:39.757

6

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%;
    }
}

edited Feb 08 '15 at 01:57

answered Feb 08 '15 at 01:50

Josh Crozier

233,099
56
391
304

Cool, I think better would be to apply this at max-width: 768px. http://jsfiddle.net/2xvv5mod/1/ – tachyonflux Feb 08 '15 at 01:56
1

@karaokyo Oh, good point. I didn't realize you were using Bootstrap even though you said you were. – Josh Crozier Feb 08 '15 at 01:58
I actually ended up going with `max-width: 100%` – tachyonflux Feb 08 '15 at 16:18

score 3 · Answer 3 · answered Feb 18 '19 at 22:43

3

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>

answered Feb 18 '19 at 22:43

ottz0

2,595
7
25
45

score 0 · Answer 4 · answered Feb 08 '19 at 11:31

0

I'd suggest to take out a bit of confusion since the snippet does not really match with the linked details. Plus it has a typo. Just to let the framing tags work as fix points.

<body class="d-flex flex-column">
  <nav></nav>
  <section class="container-fluid flex-grow-1"></section>
  <footer></footer>
</body>

answered Feb 08 '19 at 11:31

woodz

737
6
13

1

Yes `flex-grow-1` is correct but body style needs to be `min-height: 100vh;` – Muhammad Tarique Mar 05 '19 at 19:03

Using flexbox sticky footer with bootstrap

4 Answers4

Linked