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

Encountering the error "Cannot GET /login" while attempting to send a file through a post request in Express.js

I'm having trouble sending a new HTML file to the user after a successful login. Every time I attempt to send the file, I keep getting an error message saying "Cannot GET /login" on the page. Below is the section of code that's causing me diffic ...

javascriptnode.jsexpress

Issues with Angular and Bootstrap: ng-hide functionality not functioning correctly

I am struggling to grasp the concept of the ng-show angular directive as it is not functioning correctly for me. Despite following some examples I found online, I cannot seem to change the boolean value in the controller like they suggest. Instead of using ...

javascriptjqueryangularjstwitter-bootstrap

Issue with generating random cells in a table using a loop

Within my HTML code, I have a table constructed using the table element. To achieve the goal of randomly selecting specific cells from this table, I implemented a JavaScript function that utilizes a for loop for iteration purposes. Despite setting the loop ...

javascripthtml

How can I differentiate between server-side and client-side JavaScript in Node/Express?

I decided to challenge myself by working on a JavaScript project to enhance my skills, but I am facing some difficulties distinguishing between the client-side and server-side code. Currently, the setup involves a Node app with ExpressJS as a dependency. ...

javascriptnode.jsexpress

How can I conceal the element that came before in JavaScript?

<div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>LUZ HD</b> - 98 channels (including 32 HD channels) <div class="iptv_price"><b><img src="img/rj45.png" class="icon_ofert ...

javascript

Prevent users from adding or removing any letters

Exploring the ACE Editor integration with AngularJS (utilizing UI-Ace). I have a question. Is it possible to limit the user's actions to: Only allow entering a predefined character (for example, ;) Prevent deletion of any characters except for the p ...

javascriptangularjsangular-uiace-editor

How about inputting some text into a field?

Below is the code snippet for your reference: <div class="col-xs-12 col-sm-9"> <input id="Shipping_FirstName" name="firstname" ng-model="userOrder.Shipping.FirstName" type="text" class="form-control nsg-form--input ng-pristine ng-untouc ...

javascriptangularjsdom

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

I have a scenario where I have 3 buttons in a row on my asp.net page. Using JavaScript, I am setting the middle button (ButtonSR) to invisible. However, I want the button below it to move up and take its place instead of leaving an empty space. ...

javascripthtmlasp.net

Invoke the method in customButton component of fullcalendar

I've integrated a custom button into my fullcalendar: ngOnInit() { this.calendarOptions = { customButtons: { custom1: { text: 'Add event', click() { this.openModal(); } } }, height: 600, editable: t ...

javascriptangulartypescriptfullcalendar

Issues with Bootstrap Table Column Widths not Adjusting Properly

I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than ex ...

javascripthtmlcssbootstrap-4

Adding a caption aligned to the right edge of an image in Wordpress

Any suggestions on aligning an image caption under an image tag to its right hand edge? I attempted using a div, but it seems it's not allowed in WordPress. Can anyone recommend alternative CSS or tags that I could use for this purpose? ...

htmlcsswordpressimagecaption

Optimizing the position of the datepicker dropdown in Boostrap 4

I am currently utilizing Bootstrap 4 (final) with the boostrap-datepicker-plugin 1.7.1. Since Bootstrap 4 no longer uses .input-group-addon elements for the calendar icon, but instead .input-group-prepend and .input-group-append, I made some modificatio ...

jquerycsstwitter-bootstrapdatepickerbootstrap-4

Display a Google Map within a modal window following an Ajax request

I'm currently developing a website where I need to display a Google map inside a modal after an AJAX call. The modal is created using Bootstrap, but I'm facing an issue where the map remains blank once the modal is opened. An interesting observa ...

javascriptphpjqueryajaxgoogle-maps

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

javascripthtml

CSS - a collection of hyperlinks to browse. the pseudo-element a:visited::before is not behaving as anticipated

Here's what I'm looking to achieve: http://codepen.io/anon/pen/KaLarE I want to make a list of links, each with a checkbox in front. Then, I want to be able to check the boxes for visited links. I attempted this approach, but unfortunately, it ...

htmlcss

Preventing users from selecting both future and current dates in a Bootstrap datepicker: A Step-by-Step Guide

Issue Description: I am working on a project using React JS and have implemented the bootstrap datepicker. I have set the input type to "date" for the date of birth field, but I need to restrict users from selecting current or future dates. How can I achie ...

javascriptreactjsdatevalidationbootstrap-4

What could be causing my Vue application to not launch after executing `npm run serve`?

These past 24 hours have been a struggle for me. I recently embarked on the journey of learning Javascript, and my choice of JS framework was Vue JS. However, when I run npm run serve, my Vue JS app bombards me with numerous errors that seem to make no se ...

javascriptvue.jsnpm

Learn how to activate a JS native event listener using jQuery for the 'change' event

This question is unique from the one found at How to trigger jQuery change event in code. The focus here is on the interaction of jQuery with native event listeners, rather than jQuery event listeners. I am using addEventListener to bind a change event fo ...

javascriptjqueryhtmladdeventlistener

Prolong the duration before the submenu closes on a div-based css menu

I have created a unique horizontal menu using DIVs without the use of ul and li lists. Currently, I am searching for a way to delay the collapse of the submenus when the mouse moves out. I don't mind if the solution involves JavaScript, jQuery, or CSS ...

javascriptjqueryhtmlcss

When the user clicks, the template data should be displayed on the current page

I need help with rendering data from a template on the same HTML page. I want to hide the data when the back button is clicked and show it when the view button is clicked. Here is my code: <h2>Saved Deals</h2> <p>This includes deals wh ...

javascripthtmlmeteormeteor-helper