Implementing Bootstrap 4 Sticky Footer with nav links AND copyright message

Question

I am trying to implement the Bootstrap 4 Sticky footer example

It works if I just have either the nav element or the span element as a child of the footer element. But if I have both elements then only the first one has the grey background, and the vertical height of the browser window is only adjusted for the first element so there is always a scrollbar.

What am I doing wrong ?

Screenshot shows only top half of footer shown by default

Custom CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

Footer Html

<!-- footer -->
    <div class="footer">
        <footer class="text-center">
            <nav class="footercontent">
                <a href='http://blog.jthink.net' target='_blank' title='Jthink blog'><img src="http://jthink.net/images/blogger.png" alt="Jthink blog" title="Jthink blog" class="btn btn-outline"/></a>
                <a href="https://www.facebook.com/pages/Jaikoz/15843367311" target="_blank" title="Jthink Facebook page"><img src="http://jthink.net/images/facebook.png" alt="Jthink Facebook page" title="Jthink Facebook page" height="32" width="32"/></a>&nbsp;
                <a href="https://plus.google.com/b/103554086121439078551/+JthinkNet2/posts" target="_blank" title="Jthink Google+ page"><img src="http://jthink.net/images/google_plus.png" alt="google_plus" title="Jthink Google+ page" height="32" width="32"/></a>&nbsp;
                <a href="http://youtube.com/jthinkltd" target="_blank" title="Jthink YouTube channel"><img src="http://jthink.net/images/youtube.png" alt="Jthink YouTube channel" title="Jthink YouTube channel" height="32" width="32"/></a>
                <a href="mailto:paultaylor@jthink.net" target="_blank" title="Email Paul at Jthink"><img src="http://jthink.net/images/email.png" alt="Email Paul at Jthink" title="Email Paul at Jthink" height="32" width="32"/></a>&nbsp;
                <a href="http://mad.ly/signups/104159/join" target="_blank" title="Subscribe to Weekly Newsletter"><img src="http://jthink.net/images/subscribe_newsletter.png" alt="Subscribe to Weekly Newsletter" title="Subscribe to Weekly Newsletter"/></a>&nbsp;
            </nav>
             <span class="text-muted">Copyright JThink Ltd 2004 - 2018 All rights reserved. All trademarks acknowledged</span>
        </footer>
    </div>

Carol Skelly · Accepted Answer · 2018-06-20T11:14:00.657

The Bootstrap 4 sticky footer example is simple text with a single line, so having line-height the same as height (60px) works fine.

Your footer has multiple "lines" so setting line-height:60px is going to double the rendered height of the footer. I'd recommend removing the line-height (as it's used for centering in the example) and set the appropriate fixed height for your content (~ 80px). The 80px is approx. according the vertical spacing you want.

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 80px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px; /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}

https://www.codeply.com/go/IUPGbdWmF1 (no line-height)

IMO, in Bootstrap 4, the sticky footer is much easier to implement with flexbox since the CSS is minimal and doesn't require setting fixed heights.

<body class="d-flex flex-column">
   <nav></nav>
   <div class="container flex-grow-1"></div>
   <footer></footer>
</body>

https://www.codeply.com/go/g8PBpRKaPC (flexbox)

Related: Bootstrap 4 - Sticky footer - Dynamic footer height

ah, thanks I didnt realize what line-height meant and copied it blindly. You may be right about flexbox but then again could it not cause issues with something else in Bootstrap, for now I will keep as is. — Paul Taylor, Jun 20 '18 at 11:08

Implementing Bootstrap 4 Sticky Footer with nav links AND copyright message

1 Answers1