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

user_10976145 0
Viewed 3603

I'm currently working on some design and front-end issues, I'm not really a Front-End specialist of positioning and other similar elements. So for now I have built some design in my <div class="container"></div>, and basically the thing is that my footer sticks up near my last element, for now in the middle. I tried using <br> but that's not what I want... How can I set it to be in the bottom of the page? Thank you!

My code:

<footer class="page-footer font-small bg-dark pt-5">

  <!-- Footer Elements -->
  <div class="container">
    <!-- Social buttons -->
    <ul class="list-unstyled list-inline text-center">
      <li class="list-inline-item">
        <a class="btn-floating btn-fb mx-1" href="https://www.facebook.com/UAB-Interkodas-1882309422025359/">
          <img alt="fb" width="30" src="{% static '/main/svgs/facebook.svg' %}">
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-tw mx-1">
          <img alt="linkedin" width="30" src="{% static '/main/svgs/linkedin.svg' %}">
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-gplus mx-1">
          <img alt="google_plus" width="30" src="{% static '/main/svgs/google-plus.svg' %}">
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-li mx-1">
          <img alt="google_maps" width="30" src="{% static '/main/svgs/google-maps.svg' %}">
        </a>
      </li>
    </ul>
    <!-- Social buttons -->

  </div>
  <!-- Footer Elements -->

  <!-- Copyright -->
  <div class="footer-copyright text-center text-light py-3">© 2020 Copyright: All rights reserved.
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

Here's the photo :

no_desc

twitter-bootstrap html
2 Answers

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;
}
user_92166290

Try adding the fixed-bottom class:

<footer class="page-footer fixed-bottom font-small bg-dark pt-5">

Note: this will make the footer stick to the bottom of the browser window, no matter how much content you have. So as the user scrolls up and down, they will always see the footer on the screen.

user_92166290
Related