How can I position a footer at the bottom of the screen with Bootstrap 5?

Question

I'm trying to make the footer element always be at the end of the screen, no matter the size of the screen. The code I have (below), displays fine on mobile screens, but is in the middle of the screen on tablet or larger screens.

Here is the overview of the elements:

HTML
> Body
 > Some container
 > Some container
 >Footer

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<footer id="footer">
  <div style="background: black; text-align: center; margin: 0px; padding:10px; height: 45px; position: relative; min-width: 100%; bottom: 0px;">
    <p style="color:white; font-family: raleway">Text</p>
  </div>
</footer>

Answer 1

Bootstrap's positioning classes can do this for you. I've added bottom margin to the div element so its content isn't hidden behind the footer. You could also easily do it with a flexbox grid layout, which would put scrolling on the content div and eliminate that problem.

Note that I've replaced nearly all your inline styles with Bootstrap classes. Inline styles mess up your markup and make it less maintainable. Be sure you know what your library offers.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="vh-100 mb-5">A tall div.</div>

<footer id="footer" class="fixed-bottom">
  <div class="bg-black text-center m-0 p-2">
    <p class="text-white">Text</p>
  </div>
</footer>