How to Align a Footer to the Bottom of the Page using Bootstrap 5

My issue arises when using a dark background footer, as some pages lack enough content to fill the entire browser's viewport. Consequently, an unsightly white band appears below it.

How can I ensure the footer reaches the bottom of the viewport on pages with minimal content? However, on pages with more content exceeding the viewport size, the footer should only become visible after scrolling past that content.

I've experimented with Bootstrap 5's fixed-bottom and sticky-bottom classes, but they tend to hide content in cases where there is either substantial content or a smaller browser viewport.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4b504c504c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body>

  <div class="container">
    <h1>Title</h1>
    <p>Content</p>
  </div>

  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
    </div>
  </footer>


  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e4e9e9f2f5f2f4e7f6c6b3a8b4a8b4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
</html>
htmlcssbootstrap-5

Answer №1

Utilizing a flexbox layout is the simplest method. Apply the necessary classes (d-flex flex-column vh-100) to the body, and then utilize mt-auto to push the footer to the bottom. Lastly, add overflow-auto to the container so the remaining page can scroll as required.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f7ecf0ecf0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body class="d-flex flex-column vh-100">
 <div class="container overflow-auto">
  <h1>Title</h1>
  <p>Content</p>
 <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
  <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
  <p>Content</p>
  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
  <p>Content</p>
  </div>
  <footer class="bg-black text-white mt-auto">
  <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
  </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e3f8e4f8e4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

</html>

<body class="d-flex flex-column vh-100">
 <div class="container overflow-auto">
      <h1>Title</h1>
      <p>Content</p>
  </div>
  <footer class="bg-black text-white mt-auto">
      <div class="container">
          <p>This should be at the bottom of the page</p>
          <p>This should be no white band below this</p>
      </div>
  </footer>
</body>

EDIT:

If you only want the footer to be visible after scrolling large content just change vh-100 to min-vh-100

Answer №2

Utilize the min-height property.

Take a look at the code snippet provided below:

body {
  min-height: 100vh;
}

.content {
  min-height: calc(100vh - 64px); /* 64px accounts for the footer height */
}

footer p:last-child {
  margin-bottom: 0;
}
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e25392539">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>

<body>

  <div class="container content">
    <h1>Title</h1>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>

  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should have no white space beneath it</p>
    </div>
  </footer>


  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a7aaaab1b6b1b7a4b585f0ebf7ebf7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

</html>

UPDATE

const footerHeight = $("footer").height();
$(".container.content").css("min-height", "calc(100vh - " + footerHeight + "px)");
body {
  min-height: 100vh;
}

footer p:last-child {
  margin-bottom: 0;
}
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc3dfc3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>

  <div class="container content">
    <h1>Title</h1>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>

  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should have no additional whitespace underneath it</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5c9d5c9">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

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

Unusual phenomenon in ASP.NET: Adding Debug=true in the web.config file results in CSS modifications

As the question suggests: After including debug=true in my web.config file (without making any other alterations to the code), my page is displayed without a background color. Can anyone shed light on why this might be happening? ...

cssasp.netdebuggingweb-config

When the browser is resized, elements do not change position

I am attempting to build a website with solely horizontal scrolling. Check out this demo for reference. My issue arises when I resize the browser, as the content (paragraph within the light yellow box) fails to reposition itself. Ideally, I would like that ...

htmlcsspositioningcss-positionhorizontal-scrolling

PHP: Bootstrap CSS for Carousels

I'm experiencing some difficulties with the Bootstrap CSS Carousel on my website. The left and right arrows seem to be unresponsive, and the slides are not transitioning automatically. I have been unable to identify the root cause of this issue. Belo ...

phpjavascriptcsstwitter-bootstrapcarousel

The select tag is malfunctioning in the Firefox browser upon clicking with the mouse

One of the select tags in my application is causing issues in Firefox browser. Although all other select tags in different pages work fine, this particular page seems to be problematic. When attempting to change the option in the select tag, it fails to r ...

htmlfirefoxtwitter-bootstrap-3mouseangularjs-1.2

Using jQuery to target multiple div elements sharing a common class that are separate from the currently selected div

I am facing a challenge with a div that has a variable number of specific children that I need to toggle between hide and show. It's difficult to explain, but the following code provides a clear example. <div class="item_content_container"> ...

jqueryhtml

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

javascriptjqueryhtmlsharepointjquery-selectors

The dropdown-menu-end class in Bootstrap 5 navbar is not activating on hover as expected

My Bootstrap navbar has right-aligned dropdowns, but when I try changing the trigger to hover, the .dropdown-menu-end class doesn't work as expected. I attempted using CSS for the hover effect: .dropdown:hover .dropdown-menu { display: block; mar ...

cssnavbarbootstrap-5

Transforming a JSON string containing multiple arrays into a JavaScript object

My JSON file is structured as follows: { "items":[ { "username":"abc", "orderID":"1234", "commentHistory":[ { "comment":"Comment Date: 2016/12/09 13:44:23" }, { ...

javascripthtmlarraysjson

What is the method for altering font color in HTML?

Here is the section of my code that I am struggling with: <p style="font-family:'impact', color:red"> something </p> The issue I am facing is that I am unable to use both the color and the font propert ...

htmlcsscolorsfont-familyinline-styles

Leveraging webpack alongside url-loader for embedding images within React applications

When styling with an inline style and passing in the URL of an image file, I typically do it as shown below: let url = `url(${this.state.logo})` var cardStyle = { backgroundImage: url, backgroundSize: '200px 50px' ...

cssreactjswebpackwebpack-file-loader

Utilizing distinct JavaScript, JQuery, or CSS for individual Controllers within the Codeigniter framework

Currently, I am involved in a Codeigniter v3 project where we are developing a comprehensive application for a large organization. To optimize the loading speed of each page, I am looking to integrate custom JQuery and CSS files/code specific to each Con ...

javascriptphpjquerycsscodeigniter

Round up all the hyperlinks within a paragraph and organize them neatly into a list

Let me present a scenario: <p class="links">Lorem <a href="#">diam</a> nonummy nibh <a href="#">Lorem</a></p> Following that, I have a lineup: <ul class="list"> </ul> How do I achieve this using jQuery? ...

javascriptjqueryhtmlmarkup

What steps should I take to access additional details by clicking on an item using PHP?

This is my first time working with PHP. I have successfully loaded some items on my page, and now when I click on an item, I want to display more information about it. Below is the code for connecting to the database: <?php $servername = "localhost:330 ...

phphtmlmysqlhttpphpmyadmin

Is it possible to achieve the lower link set in a pure CSS horizontal menu where the horizontal link set is positioned below horizontal text tabs?

I am attempting to design a pure CSS on-hover horizontal menu. I have made some progress on my design, as shown in http://jsfiddle.net/dq8z192L/11/ The goal is to have a menu that expands horizontally when hovered over. Each tab reveals a set of links be ...

cssmenumenuitem

Personalize the File upload with HTML and Javascript

https://jsfiddle.net/yugxqopz/ I'm new to the world of UI and have a simple request: 1) I want to upload a document using an "attach file" option 2) Once the file is selected, I want to automatically trigger a specific JavaScript function as shown ...

javascriptjqueryhtmlcss

Checkbox inputs with activated labels causing double events to fire

Creating round checkboxes with tick marks dynamically and appending them to id="demo" on the click of two buttons that invoke the get(data) method is my current goal. The issue arises when both buttons are clicked simultaneously, as the checkboxes do not ...

javascriptjqueryhtmlcss

Has there been a recent issue with FireFox 3 where it fails to clear a float and does not recognize negative margins?

I've been searching online, but haven't come across a definitive answer yet. I'm interested in knowing if there is an issue with Firefox 3 when applying a negative margin to a div that is either clearing a float or containing another floated ...

cssfirefoxcss-floatmargin

Modifying Label text dynamically using jQuery on Click event

My website HTML contains the following code snippet: <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.rings.js"></script> The contents of jquery.rings.js are as follows: $('input[type="image"]') ...

javascriptphpjqueryhtml

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

I have implemented ngx-slick-carousel to showcase YouTube videos in my project. However, I am facing two main issues. Firstly, the carousel is not infinite, and when the last video is reached, there appears to be white spaces before it loops back to the fi ...

javascriptjqueryangulartypescriptbootstrap-5

Is there a glitch in the Selenium Java CSS Selector functionality?

Everything seems to be working smoothly with that code! It successfully locates and clicks on my button within the span tag. driver.findElement(By.cssSelector("span[id$=somePagesCollection] a")).click(); However, after clicking the button, an input field ...

javascripthtmlcssselenium