Create footer utlity for always at bottom- of page and after content

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

https://getbootstrap.com

MIT License

170.33k stars 78.8k forks source link

Create footer utlity for always at bottom- of page and after content #38111

Open GregJohnStewart opened 1 year ago

GregJohnStewart commented 1 year ago

Prerequisites

[X] I have searched for duplicate or closed feature requests
[X] I have read the contributing guidelines

Proposal

I would like a utility similar to sticky-footer that has slightly different behavior, as described here: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

If there's currently a way to do this, apologies that I missed it.

If it cannot be summed up into a single utility, might also be helpful to have an example featuring this behavior.

Motivation and context

This footer behavior is desirable to me.

alexandergitter commented 1 year ago

I don't think absolutely positioning the footer like this is the modern way to achieve a "sticky" footer. You can use flexbox/grid to get the same result. For example via Bootstrap's helper classes:

<body class="min-vh-100 vstack">

  <header>
    this is the header
  </header>

  <main class="flex-grow-1">
    main content area
  </main>

  <footer>
    footer goes here
  </footer>

</body>

GregJohnStewart commented 1 year ago

Thanks a bunch, this worked extremely well for me! Might just say a todo here is to add an example in the docs, but I'll leave it up to you guys

julien-deramond commented 1 year ago

Yep @GregJohnStewart, please let it open so that we can think about adding it as an example. Thanks for the idea btw.