Exploring Bootstrap and I'm curious about how to keep the footer fixed at the bottom of the page without it disappearing when scrolling through the content. Any suggestions?
Exploring Bootstrap and I'm curious about how to keep the footer fixed at the bottom of the page without it disappearing when scrolling through the content. Any suggestions?
If you want to have a footer that stays at the bottom of your screen, you can achieve this by setting its position to fixed. Here's an example:
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
In Bootstrap, you can easily do this using the fixed-bottom class in the Navbar > Placement section. Simply add this class to your footer element like so:
<footer class="fixed-bottom">
For more details, you can refer to the Bootstrap documentation here: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom
Include the following:
<div class="footer navbar-fixed-bottom">
UPDATE: Please note that the class navbar-fixed-bottom has been replaced with fixed-bottom in Bootstrap version 4-alpha.6.
Implement the fixed-bottom feature:
<div class="footer fixed-bottom">
An alternative method :
One option is to utilize the CSS property "min-height: 80vh;".
This allows you to specify a minimum height based on the viewport's height.
Below is an example using Bootstrap:
<style>
main {
min-height: 80vh;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<main class="container">
<!-- Your page content here... -->
</main>
<footer class="footer navbar-fixed-bottom">
<!-- Your page footer here... -->
</footer>
| Compatibility : |
|---|
| Chrome 31+ / FireFox 31+ / Safari 7+ / Internet Expl. 9+ / Opera 29+ |
For more details, visit: https://developer.mozilla.org/fr/docs/Web/CSS/length
Make sure to include z-index:-9999; in this element, or else it may overlap with your top navigation bar when set to 1.
To achieve this effect, simply enclose all the content of the page within a div element that has the specified id styling:
<style>
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<div id="container">
<!-- Place your website content here... -->
</div>
This approach worked perfectly for me.
Feel free to take a look at this reference: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
My index.php page is causing me some confusion. <?php session_start(); if (!isset($_SESSION['var1'])) { echo "session not started..."; die(); } else { echo "session started"; die(); } ?> Within the page, there is a login form that connec ...
I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...
Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes? ...
My goal is to implement a modal box that appears when a user clicks a button and closes when the user interacts with a close button within the modal box. I have created two functions for this purpose: check() : This function changes the CSS of an element ...
One of my divs has a unique ID: id="1" Another div in a separate section has a different class: class="1". To trigger my function, I use the jQuery snippet below to simulate an onClick event on the ID div and perform an action on another div that shares ...
I've been learning CSS and HTML through an interesting tutorial on Udacity. Here's the code I've been working on: .image{ max-width: 50%; } .app{ display: flex; } .description{ color: red; max-width: 705px; } <h1 class="title" ...
I'm attempting to save videos from the following URL: Original: https://api.tiktokv.com/aweme/v1/playwm/?video_id=v09044340000bq0vmd39if221ld9o5n0 The link then changes to this: http://v16m.tiktokcdn.com/e50056249a925719f71ce8618053e173/5eee4e39/vid ...
I am trying to retrieve the value of a variable set using an input tag from one tpl file. Here is the input tag in A.tpl file: <input type="checkbox" class="checkbox" name="payment_data[processor_params][enable_addbillcard]" id="optional_enable_addbil ...
Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...
Whenever I click on the link, I am able to retrieve the correct id, but the status changes for all posts instead of just the selected item. Below is the HTML code: <div th:each="p : ${posts}"> <div id="para"> <a style="float: right;" href= ...
I am attempting to extract an inner div from an outer div and relocate it outside of the outer div. https://i.stack.imgur.com/NSS7B.png <div class="vc_gitem-zone-mini"> <div class="vc_gitem_row.............."></div> <div> I Would ...
I am currently working on generating HTML content using the mustache template engine. However, I have encountered an issue when trying to render a list of objects. Below is an example of my object: var Prod={ "Object1": { "name": "name1", "cat ...
Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...
After experimenting with various setups, I have yet to find a complete solution. My objective is to have 4 tables stacked on top of each other, each starting just below 1/4 of the browser height. I want the ability to resize each table vertically, making t ...
Below is the code I have for a header: <div id="title-text"> The Cuttlefisher Paradise </div> <div id="choices"> <ul> <li id="home"><a href="#">Home</a></li> <li id="contact">&l ...
I am utilizing CSS code to create column a and column b, using float in the code to dynamically expand column a as content is added to column b. However, this expansion is not occurring as expected. To see my code, please visit http://jsfiddle.net/hadinetc ...
Resolved - http://jsfiddle.net/CrSpu/11704/ I'm facing an issue with a table that has autoscroll functionality. I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen. I'm uncer ...
When using bootstrap 4, I want my field to always expand downwards and never upwards, even when half the screen is taken up by the form's select element. How can I achieve this effect? I have tried using data-dropup-auto="false" but it didn't wo ...
How can I execute a function when the user submits a form using an external JavaScript file? index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>example</title> ...
Is there a way to create a clickable link using a .swf flash file with swfObject? I want the entire video to be clickable, but I'm struggling to figure out how to do it. If you take a look at this example here: , you'll see that they were able ...