Skip to main content
ALsp
ALsp
Legend
July 21, 2018
Question

Sticky Footers

  • July 21, 2018
  • 1 reply
  • 1702 views

If you're using our Harmony Page Builder tool or Bootstrap 4 (which sadly does not come with a Harmony-like automated UI) you can easily craft a sticky footer. See tutorial:

Harmony Sticky Footer

Note that this technique will also work with floated columns in the content areas, but once you explore the power of Flexbox, we're sure you will discard floats like yesterday's newspaper

      This topic has been closed for replies.

      1 reply

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 21, 2018

      I do it a little differently in Bootstrap 4.  To clarify terms a bit, this is not to be confused with the "sticky" class in Bootstrap which positions an element at viewport top but only after you scroll past it.  

      https://getbootstrap.com/docs/4.0/utilities/position/#sticky-top

      This example pushes footer to viewport bottom on short pages where there is very little content.   Tested in latest FF, Chrome, MS Edge and IE 11.

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>Bootstrap 4 bottom footer </title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!--Bootstrap 4 CSS-->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
      <style>
      body {height: 100vh;}
      .flex-grow {flex: 1 0 auto;}
      </style>
      </head>
      <body class="d-flex flex-column">
      <nav class="navbar bg-dark text-white">Navigation goes here</nav>
      <main class="container flex-grow">
      <h1 class="p-1">Hello World!</h1>
      <h2 class="text-danger">Welcome to Bootstrap 4</h2>
      </main>
      <footer class="bg-dark text-warning text-center">
      <p class="p-2">On short pages, footer hugs bottom of screen.</p>
      </footer>
      <!--jQuery Core--> 
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
      <!--Popper JS--> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
      <!--Bootstrap 4 JS--> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
      </body>
      </html>
      Nancy O'Shea— Product User & Community Expert
      ALsp
      ALspAuthor
      Legend
      July 21, 2018

      I'm really confused. Your method is essentially the same as mine, but includes thousands of lines of irrelevant code. What exactly are you trying to do? Teach code or push Bootstrap?

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 21, 2018

      I'm using built-in Bootstrap classes.  For example:  <body class="d-flex flex-column"> 

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices