Fixed Footer in Bootstrap

Fixed footer in Bootstrap

To get a footer that sticks to the bottom of your viewport, give it a fixed position like this:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap includes this CSS in the Navbar > Placement section with the class fixed-bottom. Just add this class to your footer element:

<footer class="fixed-bottom">

Bootstrap docs: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Bootstrap footer doesn't stick to the bottom of the page

Don't use the fixed-bottom class in the footer and try this instead. You may need to adjust the values a bit instead of using 160px.

html {
  position: relative;
  min-height: 100%;
  padding-bottom:160px;
}
body {
  margin-bottom: 160px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 160px;
}

Flushing footer to bottom of the page, twitter bootstrap

Found the snippets here works really well for bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

How to make the footer stick to the bottom of the page and centered in Bootstrap?

The simple way is to use flexbox on the BODY or some wrapper element. Then use mt-auto to push the footer to the bottom of the page.

<body class="d-flex flex-column min-vh-100">
  <div class="container">Other page content..</div>
  <div class="footer mt-auto text-center">
    <span id="bottom"> 
        <hr>
        <p>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
       </p>
    </span>
  </div>
</body>

https://codeply.com/p/prWsoALtSD

Also see: Bootstrap 4 Sticky Footer Not Sticking

Footer not sticky to bottom bootstrap 5.2.2

From the example where you got the code for the sticky footer, there is an external css file where the footer gets it's stickyness from. I have copied it and I will paste here(Inline CSS)

Change your blade code to this:

<!DOCTYPE html>
<html class="h-100">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Website name" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
    <link href="{{ asset('/css/offcanvas.css') }}" rel="stylesheet"/>
    <script src="{{ mix('/js/app.js') }}" defer></script>
        <style>
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}
</style>
</head>

<body class="d-flex flex-column h-100">
  @inertia
</body>

</html>

Fixed Footer in Bootstrap