'how to use bulma's flexbox to make footer stick to bottom of page?

I've just started learning about reactjs and bulma.css. I'm trying to make a <footer> to stick to the bottom of the page using bulma's flexbox since I want to avoid writing my own css rules.

I already installed bulma using npm and imported bulma.css in the index.js like this

import "bulma/css/bulma.css";

but my code below still makes the <footer> to stick under the header..

<div className='container'>
  <header className='has-text-centered'>
    <h1>My Store</h1>
  </header>

  <div>
    <h2>Dashboard Title</h2>
  </div>

  <footer className="has-text-centered is-flex-align-items-flex-end">
    <small>
      <span>Copyright @2022</span>
      <br />
    </small>
    <a href="/">About</a>
  </footer>
</div>
reactjsflexboxbulma


Solution 1:[1]

The straightforward-bulma way would look something like:

  1. Make sure the body and html are the full page height
    Since this is every project-dependent, I've used the classic body { height: 100vh; } for now

  2. The same for the container, it needs to be enlarged. Using the is-fullheight from the hero elements can be used (note: Consider using a hero instead of the container)

  3. Give the footer a mt-auto which is short for margin-top: auto. This will force the footer to stick to the bottom of the page

html, body { height: 100vh; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

<div class='container hero is-fullheight'>
  <header class='has-text-centered'>
    <h1>My Store</h1>
  </header>

  <div>
    <h2>Dashboard Title</h2>
  </div>

  <footer class="has-text-centered is-flex-align-items-flex-end mt-auto">
    <small>
      <span>Copyright @2022</span>
      <br />
    </small>
    <a href="/">About</a>
  </footer>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions