Bulma: Support for sticky footer

[soc]

It would be nice if Bulma had built-in support for "sticky footers" as described in https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/.

[ibrahimyu]

+1 this is a must have!

[jgthms]

Yeah, so this requires a class on the html or body, and an additional container like .main or something. It's a tricky one because it's not a separate component but a collection of things. I might add it though.

[guilhermedecampo]

Any news on that?

[joaoeffting]

trying to do the same but not working :c

[guilhermedecampo]

@joaoeffting try out...

layout.jsx

<div className={styles.site}>
  <Header/>
  <main className={styles.site__content}>
    // my-content
  </main>
  <Footer />
</div>

layout.styl

.site
  display flex
  min-height 100vh
  flex-direction column

.site__content
  flex 1

[evertramos]

yeah.. it would be nice to have a sticky and might a always visible as well. I mean, when you have infinite scroll and still want a fixed footer in your page.

Thanks!

[VizuaaLOG]

There is a pull request to add this in at #366

[neovive]

@guilhermedecampo solution works well. Just use a wrapper div around the content block that is just above the footer.

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

#wrapper {
  flex: 1;
}

[jgillich]

@jgthms I'm probably missing something, why were this and #366 closed?

[benbrittain]

A Sticky footer by default would still be greatly useful

[toymachiner62]

@jgillich @jgthms I'm also wondering why this was closed.

[edg-l]

.fix-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    overflow:hidden;
}

[obfusticatedcode]

I'm using Bulma and echo what other people have mentioned that a sticky footer class="" would be great. I've used, this simple solution, https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ which works great.

[solbreslin]

+1

[lobanovkirill]

Please add sticky class for footer!

[BenBao93]

+1

The solution mentioned by @obfusticatedcode works flawless but having it built in would be more beautiful

[rvalery]

+1

[dikaio]

+1

[jgillich]

Stop with the +1, they don't do anything. Use reactions.

[dikaio]

@jgillich. Yes, that just made an enormous difference...

[jethromay]

+1

[pskarlas]

This solution serves me more than well...no extra wrappers involved.

[ErikThiart]

Sticky Footer should be the default for Bulma, I cannot think of a reason why you would not want this behavior.

[schleimschein]

+1 Actually I was irritated when I discovered that this feature doesn't exist.
Edit: ... because the rest of Bulma is so well built :)

[diomed]

@jgthms why is this, despite so much interest for it, closed and not implemented?

[sergiubologa]

I use a fixed navbar (.is-fixed-top) so in order to get rid of the unnecessary scrollbar I use the following solution:

body {
  display: flex;
  min-height: calc(100vh - 52px);
  flex-direction: column;
}

#wrapper {
  flex: 1;
}

where 52px is the height of the navbar.

[AllanDaemon]

I expected the fixed footer the be the default behavior. It seems to me that most people also expected this to be the default one, and the non-fixed one the variation.

And what is more surprising to my experience is that it isn't implemented yet. But things seem to be on the way to be fixed.

[mrUlrik]

@sergiubologa This doesn't seem to work across browsers. Are you having that issue?

[spridev]

I also use a fixed navbar, but instead of hardcoding the navbar-height (like @sergiubologa did), I used an available bulma variable:

body {
  display: flex;
  min-height: calc(100vh - #{$navbar-height});
  flex-direction: column;
}

#wrapper {
  flex: 1 0 auto;
}

I also replaced flex: 1 by flex: 1 0 auto to make it work on IE11.

[mlars84]

It's not ideal, but you can also just give your footer a navbar is-fixed-bottom class. It's crazy they wouldn't just have footer is-fixed-bottom, or have is-fixed-bottom be a helper for anything.

[omrico]

Has anyone succeeded implementing @neovive solution with Angular 2+?
I know this is a CSS related issue rather then Angular.
Thanks in advance.

[markand]

I would like to see this as well.

[ErikThiart]

Just to confirm do you guys want a footer that stick to the bottom of the screen if there is not enough content, but then continue to move down as your content grows, IE NOT a stuck/pegged to the bottom footer that remains there as you scroll down or do you want a fixed footer that is at the bottom of the screen and remains there whilst you scroll down?

[omrico]

a footer that stick to the bottom of the screen if there is not enough content, but then continue to move down as your content grows, IE NOT a stuck/pegged to the bottom footer that remains there as you scroll down.

That one ☝️

[mlars84]

Yep. "a footer that stick to the bottom of the screen if there is not enough content, but then continue to move down as your content grows, IE NOT a stuck/pegged to the bottom footer that remains there as you scroll down"

[Warix3]

Bulma would've been better with this as a default. I've used https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and it works fine. Sure it would add some extra classes and elements that need to be used, but at least give us an option to do that. It doesn't have to be the default but it would definitely improve bulma if it becomes an option.

[joaopgrassi]

I've been banging my head trying to implement the solution proposed by OP in an Angular CLI app for a couple of hours. So, I followed the approach there and added the class in the body and in a wrapper div. In my case, around router-outlet where my content is loaded:

index.html

 <!-- omitted header for brevity -->
<body class="Site">
  <app-root></app-root>
</body>
</html>

app.component.html

<div class="Site-content">
    <router-outlet></router-outlet>
</div>
<footer class="footer">
    Footer here
</footer>

And it doesn't work! Tried everything. Almost giving up, I tried one last thing: I added the class to the app-root instead and it worked!

 <!-- omitted header for brevity -->
<body>
  <app-root class="Site"></app-root>
</body>
</html>

Not sure why it was not working on body... but my best guess is that the Site and Site-content classes have to be direct siblings? (not even sure if this is the correct term). When I had the Site class in the body, the<app-root> was in between the wrapper div that contained the Site-content. Might be obvious or a silly mistake on my side, but I thought it would help others putting this here.

[shepherdjerred]

Using bulma with react, this solution worked perfectly fine for me without any other work

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

My root component looks like this

ReactDOM.render((
  <Provider store={store}>
    <HashRouter>
      <div className='site'>
        <ReduxNavigation />
        <div className='site-content'>
          <ReduxRouter />
        </div>
        <Footer />
      </div>
    </HashRouter>
  </Provider>
), document.getElementById('root'));

[MrJacz]

@jgthms Please reopen this issue and reconsider implementation because I've been looking for a working solution for the last 12 hours and Haven't found anything that works as intended... this is something that has a lot of interest and should not be put to the side. even if you make an extension for it, it would be so f*ing helpful you don't understand!

[JamesTheHacker]

Still not implemented?! It's not even hard to implement and so many people have requested their support for this. I start to lose faith in a library when it fails to keep up to conventions and its community.

[ghost]

I'm going to also vote on this. It seems that it exists the ability to actually fix this issue. @jgthms if there is something very specific you want help with to get this done let us know as a community we'd all be glad to help.

[JamesTheHacker]

I feel like a right plank. It's been in the documentation all along .is-fixed-bottom.

https://bulma.io/documentation/components/navbar/#fixed-navbar

🤦‍♂️

I checked out what is-fixed-bottom and it does exactly the following except I've modified it for sticky footers.

footer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 30;
}

K.I.S.S 😉

[Warix3]

@JamesTheHacker It's not the same as sticky footer described in the issue. Take a look here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Sticky footer stays always on bottom of the web page and not on bottom of the screen, unless there is not enough content, then it's both on bottom of the screen and on bottom of the page. And of course when you scroll down to the bottom. Unlike fixed navbar which is always on bottom of the screen regardless of content and scrolling.

[JamesTheHacker]

@Warix3 I see.

[rmuchall]

@jgthms
Would it be possible to reopen this issue? :)

Thanks!

[niconisoria]

Reopen this issue again please!

[nullbio]

I too am seeking the holy sticky footer.

[Clauber]

Nothing yet?

[cameronb23]

Would be a great addition for (clearly) many of us. Just hoping the issue gets reopened 👍

[kimbaudi]

I want my sticky footer to work whether or not my navbar is fixed (to the top or bottom). So I ended up combining the solutions provided by @guilhermedecampo and @iSpri.

body {
  &.default {
    display: flex;
    // use this if navbar is NOT fixed (default)
    min-height: 100vh;
    flex-direction: column;
  }
  &.fixed {
    display: flex;
    // use this if navbar is fixed
    min-height: calc(100vh - #{$navbar-height});
    flex-direction: column;
  }
}

Now I add <body class="default"> when I'm using a regular navbar and I add <body class="fixed"> when I'm using a fixed navbar. Now I get sticky footer when my navbar is fixed and also when its not! 😄

[estysdesu]

+1

[collyrooms]

come on bulma

[jgehrcke]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Footer at the bottom / sticky footer</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
    />
    <style type="text/css" media="screen">
      body {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      #wrapper {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <section class="hero is-medium is-primary is-bold">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">
              The footer is at the bottom. Seriously. 🦠
            </h1>
            <h2 class="subtitle">
              By <a href="https://gehrcke.de">Jan-Philip Gehrcke</a>
            </h2>
          </div>
        </div>
      </section>
    </div>
    <footer class="footer">
      <div class="content has-text-centered">
        <p>
          I am down here.
        </p>
      </div>
    </footer>
  </body>
</html>

A minimal working example, based on one of the first comments above: https://github.com/jgthms/bulma/issues/47#issuecomment-285078785

Demo: https://gehrcke.de/files/perm/github/bulma-sticky-footer.html

[pergsify]

I'm using Vue and thanks much @jgehrcke this solves my requirement with simple tweaks.

<template>
    <div class="page-wrapper">
        <div class="content-wrapper">

        </div>
        <footer class="footer">
        </footer>
    </div>
</template>

<style scoped>
.page-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
}
</style>

[kambanwait]

I would recommend using CSS Grid for the sticky footer over flex box

Flex box is best used for components within the layout.
CSS Grid is best used for page layouts. Like the header, columns in the main body and the footer

My approach is:

html,
body {
    height: 100%;
}

// whatever <div> you have wrapping around all of your site - I guess you could use <body> here but I'd recommend using a <section> or <div> with the class of:

.grid-container {
  grid-template-rows: 52px 1fr auto; // 52px is height of the header
  grid-template-areas:
  'header'
  'content'
  'footer';
  display: grid;
  height: 100vh;
}

.grid-content {
  grid-area: content;
}

footer {
  grid-area: footer;
}

edit: added screenshot

[glosta]

@guilhermedecampo solution works well. Just use a wrapper div around the content block that is just above the footer.

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

#wrapper {
  flex: 1;
}

To get this to work on IE 11 consider:

.wrap-to-fix-footer {
    flex: 1 0 0;
}