The footer bar is not appearing at the bottom of the page as expected

I'm having trouble implementing the sticky footer from the bootstrap4 starter template. The footer is not sticking to the bottom of the page as expected, and I'm not sure why.

Both CSS files (starter-template.css and sticky-footer.css) from the template are located at the same level as index.html

https://i.sstatic.net/ey6Iq.png

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Jekyll v4.1.1">
  <title>Boostrap NavBar & Footer</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/starter-template/">

  <!-- Bootstrap core CSS -->
  <link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <!-- Custom styles for this template -->
  <link href="starter-template.css" rel="stylesheet">
  <link href="sticky-footer.css" rel="stylesheet">
</head>

<body class="d-flex flex-column h-100">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="index.html">NavBar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item disabled">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">One</a>
            <a class="dropdown-item" href="#">Two</a>
            <a class="dropdown-item" href="#">Three</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main" class="container">

    <div class="starter-template">
      <h1>Sticky footer</h1><br>
      <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>

    </div>

  </main>
  <!-- /.container -->

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')
  </script>
  <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>


  <footer class="footer mt-auto py-3">
    <div class="container">
      <div class="row">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </div>
  </footer>

</body>

</html>

htmlcssbootstrap-4footer

Answer №1

Adjust the height of both html and body elements to be 100%:

html, body {
  height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<body class="d-flex flex-column h-100">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="index.html">NavBar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
      aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item disabled">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Menu</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">One</a>
            <a class="dropdown-item" href="#">Two</a>
            <a class="dropdown-item" href="#">Three</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main" class="container">

    <div class="starter-template">
      <h1>Sticky footer</h1><br>
      <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>

    </div>

  </main><!-- /.container -->

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
  <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>


  <footer class="footer mt-auto py-3">
    <div class="container">
      <div class="row">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </div>
  </footer>

Answer №2

Try using the CSS property position: sticky; along with bottom: 0

body{
margin:0;}
footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px;
    background: #ddd;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Jekyll v4.1.1">
  <title>Boostrap NavBar & Footer</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/starter-template/">

  <!-- Bootstrap core CSS -->
  <link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <!-- Custom styles for this template -->
  <link href="starter-template.css" rel="stylesheet">
  <link href="sticky-footer.css" rel="stylesheet">
</head>

<body class="d-flex flex-column h-100">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="index.html">NavBar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item disabled">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">One</a>
            <a class="dropdown-item" href="#">Two</a>
            <a class="dropdown-item" href="#">Three</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main" class="container">

    <div class="starter-template">
      <h1>Sticky footer</h1><br>
      <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>

    </div>

  </main>
  <!-- /.container -->

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')
  </script>
  <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>


  <footer class="footer mt-auto py-3">
    <div class="container">
      <div class="row">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </div>
  </footer>

</body>

</html>

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

JavaScript's eval function returns Octal instead of decimal values

Having an issue with my HTML calculator that uses JavaScript. Sometimes users input values like 010 instead of 10, resulting in incorrect octal calculations by the eval function. Example 1: eval('20*15+8*10'); Result: 380 (Correct) Example 2: e ...

javascripthtmleval

How come the div element is not rendering the CSS styles?

What could be the reason for .header not displaying the background color and height settings? https://jsfiddle.net/f3puaeq6/1/ .header{ background-color: black; height: 300px; } ...

htmlcss

Adapt the stylesheet for mobile devices using CSS

I am struggling with updating file paths in CSS depending on whether the end user is accessing my site from a PC or mobile device. Below is my CSS code, where I attempted to redirect users if they are on a handheld device: <link rel="stylesheet" type=" ...

javascriptjqueryhtmlcssmobile

Tips for embedding HTML code within {{ }} in Django templates

I'm curious about how to incorporate HTML within {{ }}: {{ article.tags.all|join:", " }} This code snippet returns tags separated by commas, for example: sports, cricket, nature, etc. What I would like to achieve is: {{ <span class="label"&g ...

pythonhtmldjangomodel

Enhance this piece of code with JavaScript features

I recently implemented a scrolling script on my website that I found at this link: http://blog.waiyanlin.net/example/jquery/flyingtext.html. However, the animation currently scrolls from left to right and I would like it to scroll from right to left inst ...

javascriptjqueryhtmlcss

Modify Bootstrap TouchSpin's initial value

Struggling to update the initial value displayed in TouchSpin, it seems like there is no direct way to do it. While it's possible to change other values like the maximum value, attempts to set the initval directly have failed. $("input[name=&apos ...

javascriptbootstrap-4

Mastering the Art of Scrolling to a Specific Div with jQuery Animation

I've been searching for a solution on stack overflow, but because I'm not very proficient in jquery, I haven't been successful. My question is, how can I smoothly scroll from the top of the page to a specific div? I've successfully ach ...

javascriptjqueryhtmlscroll

How can you create a textbox that initially shows one value but switches to display a different value when clicked?

Is there a way to have a textbox with the default value "enter text here" which changes when clicked on? The current code I have only displays the default value: <input type="text" name="phrase" value="Enter text here..." size="24" onfocus="if(this.va ...

javascriptjqueryhtmlinputtextbox

Discover html documents in a file structure using php and import them into a mysql database

I am facing an issue with my folder structure, which looks like the following example Groups - apple -- ahen45.html -- rev34.html -- ...... - bat -- fsf.html -- ere.html --.... ... The parent folder is 'Groups' and it contains subfolders lik ...

phphtmlmysqlregexdom

Algorithm for detecting collisions in Javascript

I am looking to implement a collision detection function in JavaScript for canvas. Specifically, I have coin and piggy bank objects and want to create a function that triggers the disappearance of a coin object when it comes into contact with a piggy bank. ...

javascripthtmlcanvas

Guidelines for establishing a vertical grid structure

Can anyone assist me? I am really stuck and trying to create a grid using Bootstrap. How can I achieve a layout like this? https://i.sstatic.net/EVw0H.png I have attempted to create it using col-md, but the result is like this: https://i.sstatic.net/Nl ...

laravelbootstrap-4layoutgrid

What is the easiest method to design an email subscription form that remains fixed on the top right corner of the screen?

Looking for advice on setting up a sleek email signup bar that remains at the top of the browser while users scroll and navigate through different pages. I am working with WordPress and have jquery already loaded, but have not yet worked with either. Up ...

javascriptjqueryhtmlcsswordpress

Extract information from various webpages with identical URLs

I am struggling to extract data from a specific webpage (). Even though I can successfully gather information from the initial page, whenever I attempt to navigate to subsequent pages, it continues to display the same dataset. It seems to retrieve the iden ...

htmlseleniumselenium-webdriverweb-scraping

Styling with CSS: Spinning picture for mobile displays

http://jsfiddle.net/ajxqnqpo/ I'm facing a challenge with displaying a rotated image on full screen for mobile devices without using fixed width or margin properties. The image should ideally have a 10px margin from each side. The issue arises becau ...

htmlcsscss-transforms

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

In order to determine if a checkbox is checked, we use the following code: let isChecked = event.target.checked But what about multiple select options like the example below? <select name="books[]" multiple> <option value="A">A</option& ...

javascripthtmlhtml-selectdom-eventsmultiple-select

Tips for modifying a biography with PHP

I'm working on a feature that allows users to edit their biography. I want the text stored in the database to show up in the text box, rather than just as a placeholder. How can I achieve this? Currently, the text is set as a placeholder, but my goal ...

phphtml

Conceal a DIV upon being shown in a designated container

My current struggle involves hiding a specific DIV element only when it is displayed within another div. The scenario is this: I have a Contact Form that appears in two different places - once in a sidebar and again on a dedicated contact page. The form is ...

phpcss

Vertical alignment of text within a center位置

My current project involves creating a website layout similar to this: https://i.sstatic.net/5i1BK.png I am facing difficulty in centering the text within the box like this: https://i.sstatic.net/lCaFQ.png This is my progress so far: @font-face { ...

htmlcssskeleton-css-boilerplate

Type the website address into the browser's address bar

Recently, I've been exploring the possibility of combining two ideas to navigate to a relative URL based on the current URL. While browsing this link, I came across the following code snippet: <script> function myFunction() { var x ...

javascripthtmlurl

Maximize the vertical space within a window by utilizing row/container bootstrap to fill

I have been grappling with this issue for the past three days, without any success. On my HTML page, I need the content to fit the window perfectly using bootstrap 4.1.1. The structure of the page is simple: 1 Header row with automatic or fixed height 1 ...

bootstrap-4containersheight