Skip to main content
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
    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
    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