Creating a Custom Bootstrap 4 Sticky Footer with Navigation Links and Copyright Notice

I am currently working on implementing the Bootstrap 4 Sticky footer example

Everything seems to be working fine if I only have either the nav element or the span element as a child of the footer. However, when I include both elements, only the first one gets the grey background, and the vertical height adjustment of the browser window only applies to the first element, resulting in a persistent scrollbar.

Any idea what could be causing this issue?

The screenshot below displays only the top half of the footer by default: https://i.sstatic.net/e5sa1.jpg

Here is the Custom CSS being used:

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

Below is the Footer Html code snippet:

<!-- 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"/>&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"/>&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"/>&nbsp;
                <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d3d2c3821392c34405124362e26223b72282627">[email protected]</a>" 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"/>&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"/>&nbsp;
            </nav>
             <span class="text-muted">Copyright JThink Ltd 2004 - 2018 All rights reserved. All trademarks acknowledged</span>
        </footer>
    </div>
htmlcssbootstrap-4

Answer №1

The example of a sticky footer in Bootstrap 4 is quite simple, consisting of just one line of text. In this case, setting the line-height to be the same as the height (60px) works perfectly fine.

However, if your footer contains multiple lines of text, using line-height: 60px will increase the height of the footer by doubling it. It would be better to remove the line-height (which is used for centering in the example) and instead set a fixed height for your content (~80px). This approximate height takes into consideration the vertical spacing you desire.

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

(without line-height)

In my opinion, implementing a sticky footer in Bootstrap 4 is much simpler with flexbox, as it requires minimal CSS and does not need fixed heights to be set.

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

(using flexbox)

Related: Bootstrap 4 - Sticky footer - Dynamic footer height

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate any unnecessary gaps that may exist between the cards within the deck

Utilizing Jinja2 with Flask to render a list on an HTML page, I aim to produce card decks containing data from the list using a Jinja2 loop. This is my current HTML code: <div class="container-fluid"> <div class="row"> <div clas ...

htmlcsstwitter-bootstrapjinja2

Tips for handling Ajax urlencode in PHP

I'm facing an issue with a problem and need some assistance to resolve it. Currently, I am attempting to utilize Ajax urlencode in PHP, but the POST content is not being displayed by PHP as expected when HTML is sent directly to PHP. The following c ...

javascriptphphtmlajaxurlencode

Is it necessary to eliminate any extra space at the footer's bottom?

I've searched through various solutions to address this issue online and experimented with fixed, sticky, and absolute positioning as well as adjusting the margin-bottom property. However, I am still encountering a challenge with excessive white space ...

htmlcssflexbox

Polymer: Basic data binding is not functional in the second element

After dedicating 6 hours to this problem, I still can't seem to find a solution. Below is the code snippet from index.html: <flat-data-array availableModes="{{modes}}" id="dataArray"></flat-data-array> <flat-strip-view availableModes=" ...

javascripthtmldompolymerpolymer-1.0

Angular: Image files could not be loaded due to a 404 error (Not Found)

After downloading this free theme, I tried to use it in my Angular project within WebStorm. However, I encountered this error message: Failed to load resource: the server responded with a status of 404 (Not Found) and despite having the correct path, ...

htmlcssjsonbootstrap-4

The table appears to be fixed in place and will not scroll, even though the data

Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...

javascriptjqueryhtml

Rejuvenate a just-launched window.open starting from the about:blank

After receiving data from an ajax result, I am trying to open a pdf in a new window. However, the pdf viewer is only displayed if I manually resize the window (using manual hotspot resizing). How can I ensure that the contents display properly in its popu ...

javascripthtmlajaxwindow

"Encountering a PHP error while trying to print an HTML link

Hello, I am currently facing an issue with my PHP code. I am unable to resolve the error that is shown in the images below. I would like to make .$row[title] clickable, so that it can open a new PHP page. On this new page, I plan to add some descriptions ...

phphtmlcssrow

Is there a way to display a loader when an item is selected from a dropdown menu? For example, while data is being fetched from the backend, can we

This is the HTML form division I have created: <div class="col-lg-2 "> <select name="limitCount" id="limitCount" ng-model="limitCount" class="form-control col-md-2 panel-refresh" ...

javascripthtmlangularjsmongodb

Efficiently Aligning Elements in CSS both Vertically and Horizontally

I'm struggling to align my form both vertically and horizontally. It's okay if this doesn't work on IE - I will include an IE detection script to prompt users to switch browsers. However, Firefox and Chrome support is essential. Below is m ...

htmlcss

Centralized Title / Side-aligned Menu

Good day, I am in need of assistance with a menu layout for my website. My goal is to have the title centered with the menu flexed out to the sides, but I'm encountering some issues. The colors included are just for testing purposes and will be update ...

cssmenuflexboxtitle

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

cssjsptwitter-bootstrapsass

Choose characteristics based on attributes, where the value after the colons is undefined

Hey everyone, I've been exploring ways to select HTML elements like: <div attr:something="else">Random content</div> I discovered that you can target these by using: document.querySelectorAll('[attr\\3A something]') ...

javascripthtmlattributescss-selectors

The legend in the fieldset is not displaying correctly due to overflow issues

Within my fieldset, there is a legend structured as shown below: <fieldset class="fieldsetStyle"> <legend class="fieldsetLegendStyle"> <div> <h:outputText value="#{msgs.LABEL_AJOUTER_U ...

htmlcss

A guide on converting SVG Files to PDF format with JSPDF using JavaScript

I encountered difficulties converting SVG Files into PDF using JSPDF. Here is the code I tried: var doc = new jsPDF(); var test = $.get('amChart.svg', function(svgText){ // console.log(svgText); var svgAsText = new XMLSerialize ...

javascripthtmlsvgpdf-generationjspdf

Can someone explain the functionality of the CSS Selector > * when used inside a Vue.js component?

While exploring the Vuestic admin dashboard tool, I noticed a glitch in the UI where the donut chart appeared larger than its container. I tried to troubleshoot and fix it for submission as a PR, but I encountered an unfamiliar CSS selector > * while de ...

cssvue.jsvue-component

Show a notification when utilizing AJAX requests

I consist of two separate files: one written in PHP and the other one in JavaScript and HTML. PHP file : <?php session_start(); //start session $_SESSION['data'] = "The content should be displayed as alert in the JS file"; JS/HTML File: & ...

javascriptphpjqueryhtmlajax

Display webpage in a fancybox

I've searched extensively for sample cases on the internet, but unfortunately, I couldn't locate any. Is there a way to upload a fresh HTML file using fancybox? $('#Create').click(function() { $.fancybox({ What content should be in ...

javascripthtmlcssfancybox

Creating Bootstrap Modals dynamically in Angular6 using a for loop is a powerful tool for enhancing user experience

<div *ngFor="let task of data ; let i = index" [attr.data-index]="i"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <div class="modal fade" id="{{task.id}}"> ...

angularbootstrap-4bootstrap-modal

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

htmlcssflexboxhidden