Placing a footer at the bottom of a webpage with the help of Bootstrap

Looking for some assistance with creating a page using bootstrap 4.5.2, as it's new territory for me. I'm trying to automatically position a footer at the bottom of the page without resorting to absolute positioning.

I attempted to use mt-auto on the footer class and apply d-flex flex-column min-vh-100 to the body, but that only pushed the footer to the bottom of the top part of the page instead of the entire page.

It's possible my version of bootstrap is outdated or there might be another issue at play that I'm not aware of.

You can view a demo below (works best in full screen). It's not perfect, but it showcases how the footer is positioned at the bottom of the top 100% rather than the entire page. Any suggestions?

<!DOCTYPE html>
<html lang="en">
<!-- Rest of the HTML code -->
</html>
javascripthtmlcssbootstrap-4

Answer №1

To reposition the elements above the footer, you have used position: absolute, which removes them from the content flow. As a result, your footer is now at the top of the page. Adjust the position value of your other elements to allow the footer to be at the bottom.

.home-top {
  /* ... */ 
  position: absolute; /* update this */ 
  /* ... */ 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute

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

A step-by-step guide to adding an object to an already existing array in Vue.js

Within the code snippet below, I am dealing with an object value and trying to figure out how to push it to an existing array. methods: { onChange(event) { this.newItems.push(event.target.value); console.log(event.target.value); } } Here is m ...

javascriptarraysvue.js

Trouble with displaying pagination within an iframe

I am facing an issue with the pagination in iframe where the height of the iframe does not increase according to the content when I navigate to the next page. Please see the issue demonstrated here: http://fsportal.us-east-1.elasticbeanstalk.com usernam ...

javascriptjqueryiframe

Create intersecting lines on a SphereGeometry

In my attempt to draw lines on a THREE.mesh using a SphereGeometry for the geometry and a MeshBasicMaterial for the material, I encountered some challenges. Initially, I used the following code snippet: var segments = 32 var geometry = new THREE.SphereG ...

javascriptthree.js

Is it not possible to generate HTML tags using jQuery and JavaScript in JSF?

I'm currently working with jsf 2.0 and richfaces 4.0 to develop my application. Occasionally, I incorporate jQuery and JavaScript functions for displaying and hiding elements. However, I've encountered an issue when trying to generate tags within ...

javascriptjqueryjsfxhtmlrichfaces

Avoiding tab events in Angular: Tips and Tricks

I am attempting to implement logic using the tab key without actually changing focus. After consulting this answer's comments, I have included both false in my markup and preventDefault() in the method. onKey(event: KeyboardEvent) { event.preventD ...

htmlangularevents

Evaluating Vue.js Watchers using Jasmine

I want to write a test for a VueJS watcher method, in order to verify if it's being called. The watcher method in my component is structured like this: watch: { value: (newValue, oldValue) => { if (newValue.Status === 'Completed') ...

javascriptunit-testingvue.jsjasmine

Tips for implementing absolute positioning with dynamically loaded images using ajax

Currently, I am faced with a challenge in setting up absolute position for all images that are dynamically generated through ajax. Below are the snippets of my code: for loop... var imagediv = document.getElementById('image_layout'); //gene ...

javascriptjquery

Are there any missing (or "optional") expressions in handlebars.js?

Currently, I am developing a build script using Node.js. To summarize, the script carries out the following tasks: Prompting the user for essential information such as the project name and description Cloning a template from a Git repository Renaming fil ...

javascriptnode.jshandlebars.js

Is it not possible to utilize inline "if" statements in conjunction with useEffect within a functional React component?

I'm currently working on integrating Okta's React SDK into a TypeScript-based application using functional components instead of class-based ones. My main challenge lies in rendering a part of the app's menu based on the user's authenti ...

javascriptreactjstypescriptreact-hooks

Restrict input to only alphabets in HTML using Angular

Can someone guide me on how to restrict input to only accept alphabet characters in Angular? I am working with reactive forms and currently using a pattern validation which only gets triggered when the form is submitted. However, I need the input field t ...

javascriptangulartypescript

Maintain the modifications in NPM software dependencies

Currently, I am developing a REACT web application and have integrated the react-datasheet library using NPM. To ensure compatibility with IE11, I made modifications to the JavaScript file installed via NPM. While these changes work perfectly on my local m ...

javascriptreactjsnpm

Error message on Chrome for Android/iPhone: Issue with Whatsapp's Click-to-Chat link opening

Encountering an issue with the Whatsapp Click-to-chat feature on Chrome version 76.0.3809.132 for iOS and Android devices. The functionality was previously working, but now displays a Toast message on Android saying "Couldn't open link." Attempts to r ...

htmlgoogle-chromehyperlinkwhatsapp

Looking for a way to conceal the scrolling content within a div beneath a transparent header? Seeking

This particular question has been asked multiple times, and after careful consideration, I found a solution that closely aligns with my scenario: Hide content underneath a transparent div while scrolling The crux of the issue is that the content div is m ...

javascriptjqueryhtmlcss

What is the best way to create an animated, step-by-step drawing of an SVG path

I am interested in creating an animated progressive drawing of a line using CSS with SVG/Canvas and JS. You can view the specific line I want to draw here <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with cust ...

javascriptcsscanvassvg

SSL page on Wordpress struggles to load CSS files

My current website is on WordPress: The issue I am facing is on this particular page: , where the CSS is not loading correctly. This specific page uses SSL connection, and when checking through Firebug, I noticed that no CSS files are being sent. What co ...

htmlcsswordpressssl

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

I'm currently working on a situation where I have the following code: <div ng-repeat="i in MediaFeedItems | filter: { category: 'userSelect' }" class="mediafeed--item"> This specific code snippet is responsible for iterating through ...

javascripthtmlangularjs

The CSS hover effect is not being implemented correctly. Can you identify the specific issue that is causing this problem?

I am working on creating a dynamic Search List for the Search Bar that changes color when hovered over and gets selected when clicked from the displayed item list. searchlist.jsx: import React from 'react' import { FaSearch } from 'react-ic ...

cssonclickhoverjsxbackground-color

Manipulating a cloned object using jQuery

var clonedForm = $('form').clone(); //clonedForm.find('input[type="hidden"]').remove(); clonedForm.find('select').each(function(){ $($(this).val()).insertAfter($(this)); $(this).remove(); }); Atte ...

jqueryhtmldom

Combine the values of two fields in real-time on a Model-View-Controller Edit form

One challenge I am facing is within an MVC Edit form that contains two fields named ExVAT and VAT. I would like to introduce a new field that displays the total of these two values. Currently, the total only reflects the sum of the two fields upon initial ...

javascriptc#asp.net-mvc

The WebDriver encountered an error while trying to click on an element

When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...

javascripthtmlseleniumjquery-selectorshtml.dropdownlistfor