All geek questions in one place

Using flexbox sticky footer with bootstrap

I am trying to use this sticky footer:

http://philipwalton.imtqy.com/solved-by-flexbox/demos/sticky-footer/

body{ display: flex; min-height: 100vh; flex-direction: column; } .content{ flex: 1; }

But this will ruin the rendering at <Width 768px.

Any simple css fix to make it work for all permissions?

http://jsfiddle.net/2xvv5mod/

+5
source share
2 answers

You need to specify the flexbox element a width of 100% .

In this case, it will be the .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%; } }
+3
source

Bootstrap 4 now uses flexbox by default, so itโ€™s easier to get a sticky (non-fixed) footer without additional CSS for flexbox. You just need to make sure 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

+2
source

Source: https://habr.com/ru/post/1212881/

More articles: