Bootstrap 3 Flush footer to bottom not fixed

Question

I am using Bootstrap 3 for a site I am designing   I want to have a footer like this sample  Sample  Please note that I don t want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem  I just want it to be always at the bottom of the content and also be responsive   Any guide will be very much appreciated     EDIT   Sorry if I wasn t clear  What happens now is that when the content body does not have enough content  My footer moves up and then it leaves an empty space at the bottom   This is what i have now for my navbar   lt nav class  navbar navbar-inverse navbar-bottom  style  padding 0 0 120px 0  gt           lt div class  container  gt               lt div class  row  gt                   lt div class  col-sm-4  gt                       lt h5 id  footer-header  gt  SITEMAP  lt  h3 gt                       lt div class  col-sm-4  style  padding  0 0 0 0px  gt                           lt p gt News lt  p gt                           lt p gt contact lt  p gt                       lt  div gt                       lt div class  col-sm-4  style  padding  0 0 0 0px  gt                           lt p gt FAQ lt  p gt                           lt p gt Privacy Policy lt  p gt                       lt  div gt                   lt  div gt                   lt div class  col-sm-4  gt                       lt h5 id  footer-header  gt  xxxx  lt  h3 gt                       lt p gt yyyyyyyyyyyyy lt  p gt                   lt  div gt                   lt div class  col-sm-4  gt                       lt h5 id  footer-header  gt  xxxxx  lt  h3 gt                       lt p gt uuuuuuuuuuuuuuu lt  p gt                   lt  div gt               lt  div gt           lt  div gt       lt  nav gt    CSS   navbar-bottom   min-height  300px  margin-top  100px  background-color   28364f  padding-top  35px  color  FFFFFF

User · Accepted Answer

See the example below  This will position your Footer to stick to bottom if the page has less content and behave like a normal footer if the page has more content   CSS          margin  0    html  body       height  100      wrapper       min-height  100       height  100       margin  0 auto -155px     the bottom margin is the negative value of the footer s height       footer   push       height  155px      push must be the same height as  footer        HTML   lt div class  wrapper  gt     lt p gt Your website content here  lt  p gt     lt div class  push  gt  lt  div gt   lt  div gt   lt div class  footer  gt     lt p gt Copyright  c  2008 lt  p gt   lt  div gt      UPDATE  New version of Bootstrap demonstrates how to add sticky footer without adding a wrapper  Please see Jboy Flaga s Answer for more details

User · Answer

use flexbox as you can use it at your disposal  The solution offered by bootstrap 4 still hunting overlap content in responsive layout  e g  it will break in mobile view  i come across the most neat trick is to use flexbox solution demo shown at here  https   philipwalton github io solved-by-flexbox demos sticky-footer   this way we do not have to deal with fixed height issue which is an obsolete solution by now   this solution works for bootstrap 3 and 4 whichever you using    lt body class  Site  gt     lt header gt     lt  header gt     lt main class  Site-content  gt     lt  main gt     lt footer gt     lt  footer gt   lt  body gt    Site     display  flex    min-height  100vh    flex-direction  column      Site-content     flex  1

User · Answer

For a pure CSS solution  scroll after the 2nd  lt hr gt   The first one is the initial answer  given back in 2016     The major flaw of the solutions above is they have a fixed height for the footer  And that just doesn t cut it in the real world  where people use a zillion number of devices and have this bad habit of rotating them when you least expect it and   Poof    there goes your page content behind the footer    In the real world  you need a function that calculates the height of the footer and dynamically adjusts the page content s padding-bottom to accommodate that height   And you need to run this tiny function on page load and resize events as well as on footer s DOMSubtreeModified  just in case your footer gets dynamically updated asynchronously or it contains animated elements that change size when interacted with    Here s a proof of concept  using jQuery v3 0 0 and Bootstrap v4-alpha  but there is no reason why it shouldn t work on lower versions of each    x000D   x000D  jQuery document  ready function      x000D      fn accomodateFooter   function     x000D      var footerHeight      footer   outerHeight    x000D        this  css   x000D         padding-bottom   footerHeight    px  x000D          x000D      x000D       footer   on  DOMSubtreeModified   function     x000D         body   accomodateFooter    x000D       x000D      window  on  resize   function     x000D         body   accomodateFooter    x000D       x000D       body   accomodateFooter    x000D    window addMoreContentToFooter   function     x000D      var f      footer    x000D      f append     lt p   gt      x000D          text   Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human s bed and fall asleep again  Throwup on your pillow sun bathe  The dog smells bad jump around on couch  meow constantly until given food  so nap all day  yet hiss at vacuum cleaner   x000D            x000D         append     lt hr   gt      x000D      x000D      x000D  body   x000D    min-height  100vh  x000D    position  relative  x000D    x000D   x000D  footer   x000D    background-color  rgba 0  0  0   65   x000D    color  white  x000D    position  absolute  x000D    bottom  0  x000D    width  100   x000D    padding  1 5rem  x000D    display  block  x000D    x000D   x000D  footer hr   x000D    border-top  1px solid rgba 0  0  0   42   x000D    border-bottom  1px solid rgba 255  255  255   21   x000D    x000D   lt link href  http   v4-alpha getbootstrap com dist css bootstrap min css  rel  stylesheet  gt  x000D   lt link href  http   v4-alpha getbootstrap com examples starter-template starter-template css  rel  stylesheet  gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 0 0 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 2 0 js tether min js  gt  lt  script gt  x000D   lt script src  http   v4-alpha getbootstrap com dist js bootstrap min js  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top  gt  x000D     lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarsExampleDefault  aria-controls  navbarsExampleDefault  aria-expanded  false  aria-label  Toggle navigation  gt  x000D           lt span class  navbar-toggler-icon  gt  lt  span gt  x000D         lt  button gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D   x000D     lt div class  collapse navbar-collapse  id  navbarsExampleDefault  gt  x000D       lt ul class  navbar-nav mr-auto  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Link lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link disabled  href     gt Disabled lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href  http   example com  id  dropdown01  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt Dropdown lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  dropdown01  gt  x000D             lt a class  dropdown-item  href     gt Action lt  a gt  x000D             lt a class  dropdown-item  href     gt Another action lt  a gt  x000D             lt a class  dropdown-item  href     gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D       lt  ul gt  x000D       lt form class  form-inline my-2 my-lg-0  gt  x000D         lt input class  form-control mr-sm-2  type  text  placeholder  Search  gt  x000D         lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  gt Search lt  button gt  x000D       lt  form gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  starter-template  gt  x000D       lt h1 gt Feed that footer - not a game  yet   lt  h1 gt  x000D       lt p class  lead  gt You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it  so the page contents do not get covered by it   lt  p gt  lt button class  btn btn-warning  onclick  window addMoreContentToFooter    gt Feed that footer lt  button gt  x000D       lt hr   gt  x000D       lt blockquote class  lead  gt  lt strong gt Note  lt  strong gt  I used jQuery  lt code gt v3 0 0 lt  code gt  and Bootstrap  lt code gt v4-alpha lt  code gt  but there is no reason why it shouldn t work with lower versions of each  lt  blockquote gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt footer gt I am a footer with dynamic content  x000D     lt hr   gt  x000D   lt  footer gt  x000D   x000D   x000D    Initially  I have posted this solution here but I realized it might help more people if posted under this question   Note  I have purposefully wrapped the    selector   accomodateFooter   as a jQuery plugin  so it could be run on any DOM element  as in most layouts it is not the    body   s bottom-padding that needs adjusting  but some page wrapper element with position relative  usually the immediate parent of the footer      Later edit  3  years after initial answer    At this point I no longer consider acceptable using JavaScript for positioning a dynamic content footer at the bottom of the page  It can be achieved with CSS alone  using flexbox  lightning fast  cross-browser   Here it is    x000D   x000D     Left this in so you could inject content into the footer and test it  x000D      but it s no longer sizing the footer  x000D   x000D  function addMoreContentToFooter     x000D    var f      footer    x000D    f append     lt p   gt      x000D        text   Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human s bed and fall asleep again  Throwup on your pillow sun bathe  The dog smells bad jump around on couch  meow constantly until given food  so nap all day  yet hiss at vacuum cleaner   x000D          x000D       append     lt hr   gt      x000D    x000D   wrapper   x000D    min-height  100vh  x000D    padding-top  54px  x000D    display  flex  x000D    flex-direction  column  x000D    x000D   x000D   wrapper gt     x000D    flex-grow  0  x000D    x000D   x000D   wrapper gt main   x000D    flex-grow  1  x000D    x000D   x000D  footer   x000D    background-color  rgba 0  0  0   65   x000D    color  white  x000D    width  100   x000D    padding  1 5rem  x000D    x000D   x000D  footer hr   x000D    border-top  1px solid rgba 0  0  0   42   x000D    border-bottom  1px solid rgba 255  255  255   21   x000D    x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  integrity  sha384-Vkoo8x4CGsO3 Hhxv8T Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 4 1 slim min js  integrity  sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  integrity  sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 4 1 js bootstrap min js  integrity  sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt div class  wrapper  gt  x000D     lt nav class  navbar navbar-expand-lg navbar-light bg-light fixed-top  gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D     lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarSupportedContent  aria-controls  navbarSupportedContent  aria-expanded  false  aria-label  Toggle navigation  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D   x000D     lt div class  collapse navbar-collapse  id  navbarSupportedContent  gt  x000D       lt ul class  navbar-nav mr-auto  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Link lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href     id  navbarDropdown  role  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdown  gt  x000D             lt a class  dropdown-item  href     gt Action lt  a gt  x000D             lt a class  dropdown-item  href     gt Another action lt  a gt  x000D             lt div class  dropdown-divider  gt  lt  div gt  x000D             lt a class  dropdown-item  href     gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link disabled  href     tabindex  -1  aria-disabled  true  gt Disabled lt  a gt  x000D         lt  li gt  x000D       lt  ul gt  x000D       lt form class  form-inline my-2 my-lg-0  gt  x000D         lt input class  form-control mr-sm-2  type  search  placeholder  Search  aria-label  Search  gt  x000D         lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  gt Search lt  button gt  x000D       lt  form gt  x000D     lt  div gt  x000D   lt  nav gt  x000D     lt main gt  x000D       lt div class  container  gt  x000D         lt div class  starter-template  gt  x000D           lt h1 gt Feed that footer - not a game  yet   lt  h1 gt  x000D           lt p class  lead  gt Footer won t ever cover the body contents  as its not fixed  It s simply placed at the bottom when the page should be shorter using  min-height 100vh  on container and using flexbox to push it down  lt  p gt  lt button class  btn btn-warning  onclick  addMoreContentToFooter    gt Feed that footer lt  button gt  x000D           lt hr   gt  x000D           lt blockquote class  lead  gt  x000D             lt strong gt Note  lt  strong gt  This example uses current latest versions of jQuery   lt code gt 3 4 1 slim lt  code gt   and Bootstrap   lt code gt 4 4 1 lt  code gt    unlike the one above   x000D           lt  blockquote gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  main gt  x000D     lt footer gt I am a footer with dynamic content  x000D       lt hr   gt  x000D     lt  footer gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use any class and make it s height fixed  It solved my issue   lt div class  quot container quot  gt  lt  div gt   lt footer gt  lt  footer gt   CSS   container      min-height  60vh

User · Answer

Galen Gidman has posted a really good solution to the problem of a responsive sticky footer that does not have a fixed height  You can find his full solution on his blog  http   galengidman com 2014 03 25 responsive-flexible-height-sticky-footers-in-css   HTML   lt header class  page-row  gt     lt h1 gt Site Title lt  h1 gt   lt  header gt    lt main class  page-row page-row-expanded  gt     lt p gt Page content goes here  lt  p gt   lt  main gt    lt footer class  page-row  gt     lt p gt Copyright  blah blah blah  lt  p gt   lt  footer gt    CSS  html  body   height  100      body     display  table    width  100       page-row     display  table-row    height  1px      page-row-expanded   height  100

User · Answer

Or this   lt footer class  navbar navbar-default navbar-fixed-bottom  gt       lt p class  text-muted  align  center  gt This is a footer lt  p gt   lt  footer gt

User · Answer

This is what worked for me using Flexbox   body-class       display  flex      min-height  100vh      flex-direction  column      body-content       flex  1 0 auto      width  100       footer       width  100       height  60px      background-color   f5f5f5      flex  none     Source  https   philipwalton github io solved-by-flexbox demos sticky-footer

User · Answer

For people still struggling and the answered solution doesn t work quite as you want it to  here is the simplest solution I have found   Wrap your main content and assign it a min view height  Adjust the 60 to whatever value your style needs    lt div id  content  style  min-height 60vh  gt  lt  div gt   lt div id  footer  gt  lt  div gt    Thats it and it works pretty well

User · Answer

This method uses minimal markup  Just put all your content in a  wrapper which has a padding-bottom and negative margin-bottom equal to the footer height  in my example 100px    html  body       height  100         give the wrapper a padding-bottom and negative margin-bottom equal to the footer height      wrapper       min-height  100       height  auto      margin  0 auto -100px      padding-bottom  100px     footer       height  100px      lt body gt    lt div class  wrapper  gt     lt p gt Your website content here  lt  p gt   lt  div gt   lt div class  footer  gt      lt p gt Copyright  c  2014 lt  p gt   lt  div gt    lt  body gt

User · Answer

None of these solutions exactly worked for me perfectly because I used navbar-inverse class in my footer   But I did get a solution that worked and Javascript-free  Used Chrome to aid in forming media queries   The height of the footer changes as the screen resizes so you have to pay attention to that and adjust accordingly  Your footer content  I set id  footer  to define my content  should use postion absolute and bottom 0 to keep it at the bottom   Also width 100    Here is my CSS with media queries   You ll have to adjust min-width and max-width and add or remove some elements    footer     position  absolute    color    ffffff    width  100     bottom  0      media only screen and  min-width 1px  and  max-width  407px         body           margin-bottom  275px              footer           height  270px            media only screen and  min-width 408px  and  max-width  768px         body           margin-bottom  245px              footer           height  240px            media only screen and  min-width 769px          body           margin-bottom  125px              footer           height  120px

User · Answer

For Bootstrap    lt div class  navbar-fixed-bottom row-fluid  gt     lt div class  navbar-inner  gt       lt div class  container  gt        Text      lt  div gt     lt  div gt   lt  div gt

User · Answer

There is a simplified solution from bootstrap here  where you don t need to create a new class   http   getbootstrap com examples sticky-footer-navbar   When you open that page  right click on a browser and  View Source  and open the sticky-footer-navbar css file  http   getbootstrap com examples sticky-footer-navbar sticky-footer-navbar css   you can see that you only need this CSS     Sticky footer styles --------------------------------------------------    html     position  relative    min-height  100     body        Margin bottom by footer height      margin-bottom  60px     footer     position  absolute    bottom  0    width  100        Set the fixed height of the footer here      height  60px    background-color   f5f5f5      for this HTML   lt html gt               lt body gt           lt  -- Begin page content -- gt           lt div class  container  gt           lt  div gt                        lt footer class  footer  gt           lt  footer gt       lt  body gt   lt  html gt

User · Answer

UPDATE  This does not directly answer the question in its entirety  but others may find this useful    This is the HTML for your responsive footer   lt footer class  footer navbar-fixed-bottom  gt        lt div class  container  gt        lt  div gt   lt  footer gt    For the CSS  footer      width 100       min-height 100px          background-color   222     This color gets inverted color or you can add navbar inverse class in html        NOTE  At the time of the posting for this question the above lines of code does not push the footer below the page content  but it will keep your footer from crawling midway up the page when there is little content on the page  For an example that does push the footer below the page content take a look here http   getbootstrap com examples sticky-footer

[html] Bootstrap 3 Flush footer to bottom. not fixed

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to footer