Bulma: sticky footer (flexbox solution)

Bulma is nice. I was looking for a way to get a sticky footer, though. Like many others, I was a little surprised that it’s not built-in: https://github.com/jgthms/bulma/issues/47

It’s of course doable. I have created a demo / minimal working example based on the solution proposed here.

<!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/bulma@0.8.0/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">
 
          I am down here.
 
      </div>
    </footer>
  </body>
</html>

I posted this in the GH thread, too: https://github.com/jgthms/bulma/issues/47#issuecomment-603547213

Jan-Philip Gehrcke, PhD

Bulma: sticky footer (flexbox solution)

Leave a Reply Cancel reply