Topic: Footer does not stick to the bottom page

Adam Adamczyk free asked 6 years ago

In case of small content in main layout footer goes up when it should be located in the bottom page


Tech Labx free commented 6 years ago

Try adding the "fixed bottom" class to the footer and see if it works. It works for fixing social buttons to the bottom of a sidenav.

Adam Adamczyk free commented 6 years ago

Nope. Same behavior. <!--Footer--> <!--Copyright--> <div> <div><!--Footer--></div> <div><footerclass="page-footer center-on-small-only pt-0 mt-5 fixed bottom"></div> <div><!--Copyright--></div> <div><divclass="footer-copyright"></div> <div><divclass="container-fluid"></div> <div>&copy; 2017 Copyright: <a href=""> </a></div> <div></div></div> <div></div></div> <div><!--/.Copyright--></div> <div></footer></div> <div><!--/.Footer--></div> </div> <pre> </pre> <!--/.Copyright--> <!--/.Footer-->

MDBootstrap staff answered 3 years ago

Bharadwaj Swamy free answered 1 year ago

import React from "react"; import { MDBFooter } from "mdb-react-ui-kit";

export default function Footer() { return ( © {new Date().getFullYear()} Copyright: Minderacodeacademy ); } this code is not sticking on the bottom of the page

Try to implement my solution:

Adam Adamczyk free commented 6 years ago

Thanks. Apparently it starts to work fine with "fixed-bottom" class.

AP foto free commented 4 years ago

Your solution link works perfect! Thank you.

Marina Pinto free answered 6 years ago

Your code has errors
<footerclass="page-footer center-on-small-only pt-0 mt-5 fixed bottom">

There has to be a space before the word "class" in general and a hyphen "-" between fixed and bottom.
so <footer class="fixed-bottom..... (in any order you want them in)

See below

<!–- Footer -–>
<footer class="page-footer center-on-small-only pt-0 mt-5 fixed-bottom">
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href=""> </a>
<!–- /.Footer -–>

Adam Adamczyk free commented 6 years ago

It was mistake in my copy and paste. In fact in my sources files this section is the same as you wrote.

Marina Pinto free commented 6 years ago

I though it strange as it happened to all classes :) Is it working now? - with the "fixed-bottom" (as opposed to having the space)

Adam Adamczyk free commented 6 years ago

No problem still persists.

AP foto free commented 4 years ago

If you have a dynamic page when it has enough content the fixed-bottom doesn't work. The footer stay there on top of the content. Bartlomiej Malanowski has the solution link.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes