Having trouble with the sticky footer feature on Bootstrap 4 while working on my TYPO3 website as a beginner.
The sticky footer is not properly positioned at the bottom of the page.
Below is the rendered source code of the page:
I initially copied the HTML file from Bootstrap's documentation folder, made some modifications, and then pasted it into my TYPO3 template.
Even after adding content to the page, the footer doesn't stay fixed - I have to scroll down to view it.
Updated in 2020 - Bootstrap 4.5+
With Bootstrap 4 embracing flexbox, utilizing flexbox for the sticky footer has become more straightforward.
<div class="d-flex flex-column min-vh-100">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
Bootstrap 4.0 Sticky Footer (4.0.0)
Simple Footer at Bottom Example (4.5.0)
Note: The flex-fill utility was added to Bootstrap 4.1 and later. Therefore, the extra CSS for flex-fill will no longer be necessary after that update. Furthermore, min-vh-100 is now included in newer releases of Bootstrap 4.
For more information, refer to: Bootstrap 4 - Sticky footer - Dynamic footer height
After some investigation, I was able to solve the issue. It seemed like there was a misunderstanding on my part regarding the concept of "Sticky", but switching from absolute positioning to fixed in the CSS file did the trick.
For example, changing this:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
to this:
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
The demonstration provided in the Bootstrap 4 documentation includes the following CSS structure:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Adjust bottom margin to accommodate footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Define fixed height of the footer here */
line-height: 60px; /* Center text vertically within the footer */
background-color: #f5f5f5;
}
One common oversight is forgetting to specify
html { position: relative; min-height: 100%; }To make your footer stick in Bootstrap 4, simply apply the fixed-bottom class. You won't need any custom CSS for this:
<footer class="footer fixed-bottom">
...
</footer>
<html class="full-height">
.
.
</html>
This solution should resolve the issue at hand. It shares similarities with Benjineer's response but utilizes Bootstrap classes for added functionality. Verified with Bootstrap version 4.3.1
When including a footer in your HTML code, make sure to use the following structure:
<footer class="footer fixed-bottom">
...
</footer>
To prevent any content from being hidden at the bottom of the page, add the following CSS rule:
html {
padding-bottom: >= footer height;
}
This will ensure that all content on your page is properly displayed without any blocking issues.
Working on a website where I want to incorporate a frame at the bottom of the screen, taking up 10% of space. I envision placing a logo within that frame, which seems straightforward. However, here is where it gets tricky. Since this frame's size de ...
I have a text paragraph along with a button that I am trying to align properly on the page. Despite my efforts, I am having trouble getting the button to display right-aligned below the text as desired. Here is the current layout: Is there a way to achie ...
I am in the process of creating a basic online application that allows users to select images from a toolbar (or storage box) and drag them onto a canvas. I am relatively new to web development but have figured out the drag and drop functionality. Right no ...
Has anyone been successful in stacking 3 layers of png images on a table? I am attempting to achieve this with a table that has 6 columns. Grey Arrow - Serving as the table background image Red Arrow - Representing a PNG within the table Blue Arrow - Ind ...
Within my HTML code, I am retrieving a value from a file and using it as a link. The code snippet looks like this: <a href="{{ var('page').value }}">page</a> Now, when the link is clicked, I want to display a popup window with the c ...
Is there a way to redirect all site files to a specific HTML file? ...
Having an autocomplete combobox within a div that expands into a dialog box presents visual issues in Internet Explorer. The line items are tightly packed together and the text is not fully visible. To replicate this error, you can obtain the source code d ...
I'm encountering an issue with my CSS3 carousel and 3D flipping. Whenever I navigate through the carousel and flip to the next slide, the first slide seems to automatically flip/flop after completing the rotation. You can see a visual demonstration o ...
I'm currently developing a hangman game using JavaScript. I am facing an issue where I need to replace the "-" with the guessed letter by the user in the correct position it belongs to within the word. While I can add the letter at the beginning or en ...
I'm currently incorporating Swiper Js into my project and I'm facing an issue with styling the arrow buttons in the slider. Whenever I try to add classes to them, they stop functioning and disappear from the HTML. Here is the code snippet: < ...
Is it possible to conceal a div along with its logo? I currently have a jpeg logo displayed at the top of my website, but I would like it to vanish after 10 seconds and have the text below it shift upward to fill the space. I've managed to hide the ...
One of my web pages contains an unorganized list similar to this: <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> How can I target the last ...
Is it possible to adjust variables in SCSS specifically for printing purposes? Here are some current variables I have: $baseFontSize : 12px; $defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif; $defaultSerif : Times, "Times New Roman" ...
Whenever I click on a follow button, it should store followerid and followingid in the follow table and change to an unfollow button. If I then click on the unfollow button, those entries should be deleted from the follow table. I have used JQuery for this ...
Check out this link: http://jsfiddle.net/2hDB9/ I'm trying to achieve the following effect: When hovering over Line 1, only the border of Line 1 should show. If you hover over Line 2, only the border of Line 2 should be displayed, not both at the s ...
showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...
The issue I encountered with my Index was related to the positioning of the contents within the body tag. I was able to resolve it by adding the following code to my site.css: margin-top: 340px; Now, my index is displaying correctly! However, after apply ...
I am attempting to incorporate the outcome of Request.QueryString('x') (VB script) into an href element. Here is the code snippet: <a runat="server" href="~/Reports/ProductionReport.aspx?SiteCode=<%=Request.QueryString('SiteCode' ...
Is it possible to use the HTML5 Audio tag with an eventListener or action using Dom/jQuery to trigger an event during playback or at the end? This answer mentions currentTime but lacks examples. Pseudo code provided below. <!DOCTYPE html> <html& ...
I'm currently utilizing Angular for the front end and Node for the back end. The data is retrieved from a MySql database where it's manually stored in text format with HTML tags. For example: <ul> <li>item1</li> <li> ...