Footer placement not aligning at the bottom using Bootstrap

I'm having trouble getting my footer to stay at the bottom of my website without it sticking when I scroll. I want it to only appear at the bottom as you scroll down the webpage.

Currently, the footer is positioned beneath the content on the webpage. I've tried using bottom:0;, but it ends up sticking and not fitting the design of my website. I've also tried using html, body { height:100%;} as suggested in other questions on stackoverflow, but haven't had any success.

If anyone has any advice on how to achieve this, I would greatly appreciate it.

Code: 

    .footer {
    background: #F37A1D;
       position : absolute;
    width: 100%;
    border-top: 3px solid #F37A1D;
    }
    <div class="footer">
    <div class="container">
            <p>&copy; COMPANY 2015</p>
        </div>
    </div>

javascripthtmlcsstwitter-bootstrap

Answer №1

*{
    padding: 0;
    margin: 0;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background: #F37A1D;
 border-top: 3px solid #F37A1D;   
}
<div class="footer">
    <div class="container">
            <p>&copy; COMPANY XYZ 2022</p>
        </div>
    </div>

Answer №2

To make the footer fixed at the bottom, simply add the navbar-fixed-bottom class.

<footer class="navbar-fixed-bottom">
    <p>Footer content</p>
</footer>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron">
    <h1>Twitter Bootstrap 3.0</h1>
  </div>

  <footer class="navbar-fixed-bottom">
    <p>Footer content</p>
  </footer>

</div>

You might find useful to check out the Bootstrap sticky footer CSS.

Answer №4

By adding a specified min-height to the main content div, you can ensure that the footer is consistently positioned at the bottom of the page, regardless of the amount of content present.

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

Tips on how to select only the currently active tab and change its background color

I am currently troubleshooting the AJAX tabs functionality on my website. The issue I am facing is that the current code does not apply any styling to indicate an active tab. I believe I may need to use some JavaScript code to address this problem, but I ...

jqueryhtmlcssajax

What is the best method for purging a previously stored variable from the cache when making an Ajax call and simultaneously passing a

I am encountering an issue with variable loading during the ajax call. Upon clicking, I pass a variable to the ajax call which then sends the value to a PHP script. The data obtained is from: rnc.csv DLRNC01 DLRNC02 DLRNC03 DLRNC04 DLRNC05 DLRNC06 DLR ...

javascriptphpjqueryajaxcaching

Javascript eval function providing inaccurate results

I have encountered a problem while using eval() for a calculator I am developing. When I input the following code: console.log(eval("5.2-5")); The output is: 0.20000000000000018 I am confused as to why this is happening. Thank you for your assistance. ...

javascripthtmleval

load a file with a client-side variable

Is there a way to load a file inside a container while utilizing an argument to fetch data from the database initially? $('#story').load('test.php'); test.php $st = $db->query("select * from users where id = " . $id); ... proce ...

javascriptphpjquery

How can we capture the current row's value for later retrieval?

Using datatables to display data from a mySQL database, I am looking to extract the current row's value and present it in a modal for editing. This is how the data is integrated into Datatable: $(document).ready(function() { $(' ...

javascriptdatatables

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

javascriptjqueryhtmllocationgoogle-places-api

testing exceptions with Jest: a step-by-step guide

As a beginner with Jest, I am currently working on a program to delve deeper into JavaScript. While my tests are functioning properly, I'm wondering if it would be better to replace the try/catch blocks with exceptions. I feel like there might be a mo ...

javascriptnode.jsunit-testingjestjs

I require the ability to retrieve only the data from a UI grid column, specifically based on the column name selected

I need help with my angularjs application that utilizes Ui grid. There is an external dropdown menu located outside of the ui grid, which lists all the column names in the grid. I want to be able to select a specific column name from this dropdown and retr ...

javascriptangularjsangular-ui-grid

Having trouble persisting my login status in Selenium using Python

Has anyone experienced issues with logging into Instagram using an automate tab? Previously, I didn't have any problems, but now it seems that Instagram is not allowing users to log in through automation. An error message stating the following appears ...

javascriptpythonseleniumselenium-webdriver

Develop an HTML table using either JSON or jQuery in Javascript

JavaScript is a bit of a mystery to me right now - I could really use some assistance in overcoming this obstacle that has me pulling my hair out! I'm struggling with constructing HTML code using JSON data. It's just not clicking for me at the m ...

javascriptjqueryjson

Display PDF blob in browser using an aesthetically pleasing URL in JavaScript

Using Node, I am retrieving a PDF from the server and sending it to my React frontend. My goal is to display the PDF in the browser within a new tab. The functionality works well, but the URL of the new tab containing the PDF is not ideal. Currently, the U ...

javascriptnode.jspdf

Is there a method to exempt a particular input field from form validation?

Is there a way to prevent a form validation error message from displaying in other input fields when using an input url field within a rich text editor component (RTE) placed inside a form element? <input type="url" v-model="state.url ...

htmlformsvue.jsvalidation

Show an image within a textview using the <img> tag in HTML

I'm trying to show an image in a textview using HTML. I have placed the image at res/drawable/img.png and here is the code I am using: String img="<img src='file:///res/drawable/img.png' />"; txt_html.append(Html.fromHtml(img)); Howe ...

javaandroidhtml

How come I am receiving a null value for isMatch from bcrypt compare even though the two password strings match exactly?

Currently, I am attempting to authenticate a user based on a password. My approach involves using bcrypt compare to check if the user's requested password matches one stored in a MongoDB database. Despite the passwords being identical, I keep receivin ...

javascriptnode.jsmongodbnpmbcrypt

Ruby on Rails: clearing the asset pipeline cache by hand

While Rails usually clears the asset pipeline cache automatically when files are modified, I am facing a unique situation. I am providing my application as an HTML response to an Ajax request, cross-domain using rack-cors to bypass CORS. The issue arises ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

jquery modal not displaying

My page is designed to display a dialog containing a set of guidelines using a PHP script that determines which guideline(s) should be shown and generates the corresponding div element(s). Afterwards, I utilize a simple $(document).ready( function() { $(" ...

jqueryhtmldialog

Is there a faster alternative to using jQuery's indexOf method?

Looking to create a search box for a large set of options (around 2000 options) The indexOf method is very slow...any alternative solutions? Jquery Code : $('#textfortitlesearch').on('keyup', function() { var query = this.value ...

jqueryhtmlindexof

What is causing my component callback to not function properly?

I'm currently following a tutorial on AngularJS callbacks from . In my code at https://plnkr.co/edit/dxyI0p0pZFZdMalLfvXO?p=preview, I've attempted to showcase the issue I'm encountering. I have initialized the component in three different w ...

javascriptangularjscallbackcomponents

Creating a full-width menu with Material UI - a step-by-step guide

I am currently working on creating a mobile menu that spans the full width of the screen. Despite my efforts, it seems like I might be misunderstanding something as my CSS rules are not being applied correctly. Here is a live code example for reference: ...

cssreactjsmaterial-ui

Saving JavaScript Object Notation (JSON) information from Node.js into MongoDB

Currently, I am successfully pulling weather data in JSON format from Wundground using their API. The next step for me is to store this data in MongoDB for future use. After retrieving the data and attempting to write it to a Mongo collection, I encountere ...

javascriptjsonnode.jsmongodb