The Bootstrap 4 Footer fails to align at the bottom of the page

Looking to design a sleek main page with a footer using bootstrap-4? Take a look at this example. Despite the footer being styled with bottom: 0;, it appears in the middle of the screen on browser or mobile view.

JSFiddle Example

HTML:

<div class="row">
      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some text...
        </p>
      </div>
      
      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
            Some more Text Some more Text Some more Text...
          </p>
        </div>
      </div>
    </div>
  
    <footer class="page-footer">
      <p class="text-center">THIS IS THE FOOTER</p>
    </footer>

CSS:

html,
    body {
      min-height: 100%;
      height: 100%;
    }
    
    .mt-100 {
      margin-top: 100px;
    }
    
    .page-footer {
      background-color: #343a40;
      color: white;
      padding: 30px;
      position: relative;
      bottom: 0;
      width: 100%;
    }
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Revamp your HTML & CSS Structure

   <!-- NEW MAIN SECTION WITH DIFFERENT BACKGROUND IMAGE-->
<div class="d-flex flex-column h-100"> /*Update HERE*/
<section class="main-image flex-fill">  /*Modify HERE*/
  <!-- IMPROVED MAIN CONTENT-->
  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-md-6">
        <h1 class="mb-4">New Text</h1>
        <p style="text-align:justify;" class="lead">
          Updated 
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Fresh Text Fresh Text Fresh TextFresh TextFresh TextFresh TextFresh TextFresh Text
          </p>
        </div>
      </div>

    </div>
  </div>

</section>

<!-- REPLACEMENT FOOTER SECTION-->
<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE UPDATED FOOTER</p>
  </footer>
</section>
</div>  /*Adjustments HERE*/


html,
body {
  min-height: 100%;
  height: 100%;
}


.mt-100 {
  margin-top: 100px;
}


.main-image {
  width: 100%;
  height: 100vh; /* remove this */
  /* responsive design */
  background-image: url("http://example.com/new-image.jpg");
  background-size: cover;
  background-position: center bottom;
}


.page-footer {
  background-color: #343a40;
  color: white;
  padding: 30px;
  position: relative;
  bottom: 0;
  width: 100%;
}

Link to the updated code snippet

Answer №2

The reason for this issue is likely due to the small size of your page content, causing it not to fill the entire page height. To fix this, consider setting the position:relative; property and then adding bottom:0;

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

Extracting text using Python and Selenium

Having trouble extracting text from HTML using Selenium and Python innerHTML <span data-select="" data-selected="Selected" data-deselect="Press enter to remove" class="multiselect__option"><span>ONE</span></span> <!----> ...

pythonhtmlselenium-webdriver

What is the best way to automatically increase the value of another column in SQL when the primary key is set to auto

In my database, I currently have a table storing customer details. I am looking to introduce a new column that will provide either existing or new customers with a unique auto-incremented ID for identification purposes. Additionally, I require a primary ke ...

phphtmlmysqlauto-increment

Tips for applying CSS conditionally to content at varying nesting levels

Currently, I am working with sass and finding it challenging to modify the structure of the page easily. The layout I have in place is due to my header having varying sizes depending on the specific page users are browsing: <div class="container"> ...

htmlcsssass

Angular directive button failing to trigger ng-click event

Recently, I started working with Angular and ran into an issue while trying to set up a custom directive. The purpose of this directive is to display a button upon hovering over it, which, when clicked, should trigger a function within the directive. The b ...

javascripthtmlangularjsangularjs-directive

Having trouble with changing images or background images in JavaScript?

Encountering issues with dynamic elements. When I click a button, the following JS function is executed. It displays a stylish CSS alert upon postback and then runs the function. function scrollToTop(sender, args) { window.scrollTo(0, 0); document. ...

javascriptjquerycssimage

"Enhance User Experience with the jQuery/JavaScript Table Pagination

I have searched extensively for a jQuery/JavaScript table pagination solution. While I found some options, they were too complex for my needs. I am looking for a simple jQuery plugin to assist with paginating an HTML table. Datatables is more than what I ...

jqueryhtmljquery-pagination

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

javascriptjqueryhtmlcss

Error code received from OpenStack Identity API GET response

I am an intern student and I have a query. Currently, I am working on bug fixing for an Openstack cloud, JavaScript, and Node.js web application. My task involves resolving toastr.error messages and translating them into different languages. How do I ret ...

javascripthtmljsonnode.jsopenstack

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position

I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...

htmlcssangulartypescript

Tips on implementing ng-template within an Angular application

I'm in the process of developing a client-side angular application and have encountered an issue regarding the implementation of angular's ng-template. Currently, I have a navbar set up as follows: <nav class="navbar navbar-inverse" > ...

javascriptjqueryhtmlangularjsangularjs-templates

Previous Button on jQuery/Javascript Slider Not Functioning

Having a small issue with my previous button, #prev, as it is not scrolling back to the previous image but instead to the next image. This is the script I am using: http://jquery.malsup.com/cycle/int2.html Additionally, when I try to set the width of the ...

javascriptjqueryhtmlcss

Creating layered images with CSS Grid

Visit this link for more details I've been attempting to create an overlap effect with 3 photos using CSS Grid. My desired outcome looks like this: Click here to see the desired result I followed tutorials that demonstrate the same method, but unfo ...

htmlcsscss-gridphoto

Difficulty encountered when applying a CSS class with JavaScript

The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...

javascriptjqueryhtml

Discovering the screen width and increasing its value using CSS

Is there a way to determine the screen size and then add 253px to it? For example, in CSS: .element { width: calc(100% + 253px); } What would be the best approach to achieve this? ...

htmlcss

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

While working on a tabbed control with mobile-angular-ui (), I encountered an issue when trying to generate the tabs dynamically. Initially, everything looked good with the following code: <ul class="nav nav-tabs" ui-state='activeTab' ui-def ...

javascriptangularjshtml

What is the best way to retrieve the ID of the list item that has been clicked during a button event?

How can I use jQuery to get the ID of a selected list item when clicking a button in my HTML code? <ul id="nav"> <li><a href="#" rel="css/default.css" id="default" > <div class="r1"></div> </a>< ...

javascriptjqueryhtml

A guide to exporting a PDF in A4 size landscape mode with jspdf

As a novice in UI development, I am currently trying to export HTML content to PDF using the JSPDF library. However, I have encountered difficulties in generating the PDF in A4 size landscape mode. The HTML code includes data with charts (canvasjs/chartjs) ...

javascripthtmlcssjspdf

Enable automatic playback of HTML5 video with the sound on

I want to add an autoplay video with sound on my website, but I'm running into issues with newer browsers like Chrome, Mozilla, and Safari blocking autoplay if the video doesn't have a 'muted' attribute. Is there a clever HTML or Javas ...

javascripthtmlvideobrowserautoplay

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

Hey there, I hope you're doing well in this new year. I've been working on a project that creates a "league table" using a large amount of data, similar to those seen in sports like football. The backend is built in PHP to process the data and d ...

javascriptphpjqueryhtmlajax

The navbar brand lacks any styling, and the navbar itself is devoid of a background color, appearing

Having trouble with my navbar - it's almost ready, but two issues are stumping me. 1) The navbar turns transparent when scrolling, even though there are no opacity settings in my CSS. I've added padding to the top for spacing, but it won't ...

backgroundbootstrap-4navbar