Fixed footer in Bootstrap

Question

I m trying out Bootstrap and I was wondering  how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled

User · Accepted Answer

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

User · Answer

Add z-index -9999  to this method  or it will cover your top bar if you have 1

User · Answer

Add this    lt div class  footer fixed-bottom  gt

User · Answer

Add this    lt div class  footer navbar-fixed-bottom  gt    https   stackoverflow com a 21604189  EDIT  class navbar-fixed-bottom has been changed to fixed-bottom as of Bootstrap v4-alpha 6   http   v4-alpha getbootstrap com components navbar  placement

User · Answer

You might want to check that example  http   getbootstrap com 2 3 2 examples sticky-footer html

User · Answer

You can do this by wrapping the page contents in a div with the following id styling applied    lt style gt   wrap      min-height  100      height  auto  important     height  100      margin  0 auto -60px     lt  style gt    lt div id  wrap  gt       lt  -- Your page content here    -- gt   lt  div gt    Worked for me

[html] Fixed footer in Bootstrap

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to footer