Twitter Bootstrap 3 Sticky Footer

Question

I have been using the twitter bootstrap framework for quite a while now and they recently updated to version 3   I m having trouble getting the sticky footer to stick to the bottom  I have used the starter template supplied by the twitter bootstrap website  but still no luck  any ideas

User · Answer

I wanted a flexible sticky footer  which is why I came here  Top answers got me in the right direction   The current  2 Oct 16  Bootstrap 3 css Sticky footer  Fixed size  looks like this   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      As long as the footer has a fixed size  the body margin-bottom creates a push to allow a pocket for the footer to sit in  In this case  both are set to 60px  But if the footer is not fixed and exceeds 60px height  it will cover your page content   Make Flexible  Delete the css body margin and footer height  Then add JavaScript to get the footer height and set the body marginBottom  That is done with the setfooter   function  Next add event listeners for when the page first loads and on resizing that run the setfooter  Note  If you footer has an accordion or anything else that triggers a size change  without a resize of window  you must call the setfooter   function again   Run the snippet and then fullscreen to demo it    x000D   x000D  function setfooter    x000D   var ht   document getElementById  footer   scrollHeight  x000D   document body style marginBottom   ht    px   x000D    x000D   x000D  window addEventListener  resize   function    x000D    setfooter    x000D      true   x000D  window addEventListener  load   function    x000D   setfooter    x000D     true   x000D  html   x000D    position  relative  x000D    min-height  100   x000D    x000D   footer   x000D    position  absolute  x000D    bottom  0  x000D    width  100   x000D     x000D       additional style for effect only    x000D     text-align  center  x000D      background-color   333  x000D      color   fff  x000D    x000D     x000D   x000D   x000D  body  x000D     additional style for effect only not needed in bootstrap   x000D    padding 0  x000D    margin  0  x000D      x000D   lt div gt  x000D    Page content x000D     lt br gt    lt br gt  x000D    line 3 x000D     lt br gt    lt br gt  x000D    line 5 x000D     lt br gt    lt br gt  x000D    line 7 x000D     x000D    lt  div gt  x000D   x000D   x000D   lt footer id  footer  class  footer  gt  x000D         lt div class  container  gt  x000D           lt p class  text-muted  gt Footer with a long text  so that resizing  to a smaller screen size  will cause the footer to grow taller  But the footer will not overflow onto the main page  lt  p gt  x000D         lt  div gt  x000D       lt  footer gt  x000D   x000D   x000D

User · Answer

In addition to the CSS you just added  remember you need to add the push div before closing the wrap div      The basic structure for the HTML is     lt div id  wrap  gt       page content here       lt div id  push  gt  lt  div gt   lt  div gt   lt  -- end wrap -- gt    lt div id  footer  gt      footer content here  lt  div gt   lt  -- end footer -- gt    Live view Edit view

User · Answer

The sticky example doesn t work for me  My solution    footer     position  fixed    bottom  0    width  100     height  3em

User · Answer

just add the class navbar-fixed-bottom to your footer    lt div class  footer navbar-fixed-bottom  gt

User · Answer

Here s the Sticky Footer simplified code as of today because they re always optimizing it and this is GOOD   HTML   lt  DOCTYPE html gt   lt html lang  en  gt     lt head gt  lt  head gt      lt body gt        lt  -- Fixed navbar -- gt       lt div class  navbar navbar-default navbar-fixed-top  role  navigation  gt         lt div class  container  gt           lt div class  navbar-header  gt             lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt               lt span class  sr-only  gt Toggle navigation lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt             lt  button gt             lt a class  navbar-brand  href     gt Project name lt  a gt           lt  div gt           lt div class  collapse navbar-collapse  gt             lt ul class  nav navbar-nav  gt               lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt               lt li gt  lt a href   about  gt About lt  a gt  lt  li gt               lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt               lt li class  dropdown  gt                 lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt                 lt ul class  dropdown-menu  gt                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                   lt li class  divider  gt  lt  li gt                   lt li class  dropdown-header  gt Nav header lt  li gt                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                   lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt                 lt  ul gt               lt  li gt             lt  ul gt           lt  div gt  lt  --  nav-collapse -- gt         lt  div gt       lt  div gt        lt  -- Begin page content -- gt       lt div class  container  gt         lt div class  page-header  gt           lt h1 gt Sticky footer with fixed navbar lt  h1 gt         lt  div gt         lt p class  lead  gt Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS  A fixed navbar has been added with  lt code gt padding-top  60px  lt  code gt  on the  lt code gt body  gt   container lt  code gt   lt  p gt         lt p gt Back to  lt a href     sticky-footer  gt the default sticky footer lt  a gt  minus the navbar  lt  p gt       lt  div gt        lt footer gt         lt div class  container  gt           lt p class  text-muted  gt Place sticky footer content here  lt  p gt         lt  div gt       lt  footer gt      lt  body gt   lt  html gt    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

User · Answer

Simple js  if    document  height    lt     window  height             footer   addClass  navbar-fixed-bottom        Update  1    window  on  resize   function            footer   toggleClass  navbar-fixed-bottom     document  height    lt     window  height

User · Answer

This has been solved by flexbox  once and forever   https   philipwalton github io solved-by-flexbox demos sticky-footer   The HTML   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    The CSS   Site     display  flex    min-height  100vh    flex-direction  column      Site-content     flex  1

User · Answer

x000D   x000D   myfooter  x000D  height  3em  x000D    background-color   f5f5f5  x000D    text-align  center  x000D    padding-top  1em  x000D    x000D   lt footer gt  x000D       lt div class  footer  gt  x000D           lt div class  container-fluid   id  myfooter  gt  x000D               lt div class  row  gt  x000D                   lt div class  col-md-12  gt  x000D                       lt p class  copy  gt Copyright  amp copy  Your words lt  p gt  x000D                   lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  footer gt  x000D   x000D   x000D

User · Answer

Just use flex  Make sure to use body and main in your HTML and it s one of the best solutions  unless you need IE9 support   It doesn t require a fixed height or similiar   That s recommended for Materialize as well   body       display  flex      min-height  100vh      flex-direction  column     main       flex  1 0 auto

User · Answer

Using flexbox is the easiest way I have found  from the guys of CSS-tricks  This is true sticky-footer  it works when the content is  lt  100  of the page and   100  of the page    lt body gt     lt div class  content  gt    content  lt  div gt   lt footer gt  lt  footer gt   lt  body gt    And CSS   html     height  100     body     min-height  100     display  flex    flex-direction  column     content     flex  1      Note that this is bootstrap-agnostic  so it works with bootstrap and without it

User · Answer

Here is a CSS based solution for a fully responsive variable-height sticky footer  Advantage  footer allows variable height  as height no longer needs to be hard-coded in CSS     x000D   x000D  body   x000D    display  -webkit-box  x000D    display  -webkit-flex  x000D    display  -moz-box  x000D    display  -ms-flexbox  x000D    display  flex  x000D    -webkit-box-orient  vertical  x000D    -webkit-box-direction  normal  x000D    -webkit-flex-direction  column  x000D       -moz-box-orient  vertical  x000D       -moz-box-direction  normal  x000D        -ms-flex-direction  column  x000D            flex-direction  column  x000D    min-height  100vh  x000D    x000D  body  gt      x000D    -webkit-box-flex  0  x000D    -webkit-flex-grow  0  x000D       -moz-box-flex  0  x000D        -ms-flex-positive  0  x000D            flex-grow  0  x000D    x000D  body  gt  nav    container   x000D    -webkit-box-flex  1  x000D    -webkit-flex-grow  1  x000D       -moz-box-flex  1  x000D        -ms-flex-positive  1  x000D            flex-grow  1  x000D    x000D   x000D   x000D   x000D     Reset CSS and some footer styling  Only needed on StackOverflow    x000D  body   x000D    padding  50px 0 0  x000D    margin  0  x000D    x000D  footer   x000D    background-color   f8f8f8   x000D    padding  15px 0 5px   x000D    border-top  1px solid  e7e7e7  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt  DOCTYPE html gt  x000D   x000D        lt  -- Fixed navbar -- gt  x000D       lt nav class  navbar navbar-default navbar-fixed-top  gt  x000D         lt div class  container  gt  x000D           lt div class  navbar-header  gt  x000D             lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  gt  x000D               lt span class  sr-only  gt Toggle navigation lt  span gt  x000D               lt span class  icon-bar  gt  lt  span gt  x000D               lt span class  icon-bar  gt  lt  span gt  x000D               lt span class  icon-bar  gt  lt  span gt  x000D             lt  button gt  x000D             lt a class  navbar-brand  href     gt Project name lt  a gt  x000D           lt  div gt  x000D           lt div id  navbar  class  collapse navbar-collapse  gt  x000D             lt ul class  nav navbar-nav  gt  x000D               lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D               lt li gt  lt a href   about  gt About lt  a gt  lt  li gt  x000D               lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt  x000D               lt li class  dropdown  gt  x000D                 lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Dropdown  lt span class  caret  gt  lt  span gt  lt  a gt  x000D                 lt ul class  dropdown-menu  gt  x000D                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                   lt li role  separator  class  divider  gt  lt  li gt  x000D                   lt li class  dropdown-header  gt Nav header lt  li gt  x000D                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt  x000D                 lt  ul gt  x000D               lt  li gt  x000D             lt  ul gt  x000D           lt  div gt  lt  --  nav-collapse -- gt  x000D         lt  div gt  x000D       lt  nav gt  x000D   x000D       lt  -- Begin page content -- gt  x000D       lt div class  container  gt  x000D         lt div class  page-header  gt  x000D           lt h1 gt Responsive sticky footer of any height lt  h1 gt  x000D         lt  div gt  x000D         lt p class  lead  gt You can have a sticky footer of any height using this CSS  It s also fully responsive  no JavaScript needed  lt  p gt  x000D         x000D       lt  div gt  x000D   x000D       lt footer class  footer  gt  x000D         lt div class  container  gt  x000D           lt p class  text-muted  gt Place sticky footer content here  lt  p gt  x000D           lt p class  text-muted  gt And some more content  lt  p gt  x000D           lt p class  text-muted  gt And more    lt  p gt  x000D         lt  div gt  x000D       lt  footer gt  x000D   x000D   x000D    And here is the un-prefixed SCSS  for gulp grunt    body     display  flex    flex-direction  column    min-height  100vh     gt          flex-grow  0         gt  nav    container       flex-grow  1

User · Answer

I write my simplified sticky footer code with padding using LESS  This answer is probably off-topic because the question doesn t talk about padding  so if you re interested check this post for more details    footer-padding       40px      Set here the footer padding  footer-inner-height  150px     Set here the footer height  without padding      Calculates the overall footer height     footer-height   footer-inner-height    footer-padding 2   html    position  relative   min-height  100     body       This avoids footer to overlap the page content     margin-bottom   footer-height    footer      Fix the footer on bottom and give it fixed height     position  absolute   bottom  0   width  100    height   footer-height   padding   footer-padding 0

User · Answer

I m a bit late on the subject but I came across this post as I ve just been bitten by that question and finally found a really easy way to get over it  simply use a navbar with the navbar-fixed-bottom class enabled  For example    lt div class  navbar navbar-default navbar-fixed-bottom  gt     lt div class  container  gt       lt span class  navbar-text  gt        Something useful      lt  span gt     lt  div gt   lt  div gt    HTH

User · Answer

Answered by the OP   Add this to your CSS file   html  body     height  100        The html and body elements cannot have any padding or margin          Wrapper for page content to push down footer     wrap     min-height  100     height  auto  important    height  100        Negative indent footer by it s height      margin  0 auto -60px        Set the fixed height of the footer here     push   footer     height  60px     footer     background-color   eee        Lastly  apply responsive CSS fixes as necessary     media  max-width  767px       footer       margin-left  -20px      margin-right  -20px      padding-left  20px      padding-right  20px

User · Answer

in Haml  amp  Sass words all that is necessary   Haml for app view layouts application html haml   html    head    body     Some  body stuff       footer       footer content   Sass for app assets stylesheets application css sass   footer-height  110px  html   position  relative   min-height  100   body   margin-bottom   footer-height  body  gt  footer   position  absolute   bottom  0   width  100    height   footer-height   based on http   getbootstrap com examples sticky-footer-navbar

User · Answer

To Summarize all of these  just keep one thing in your mind that everything except footer should have min-height  100  or little less

User · Answer

Html  lt footer class  quot footer navbar-fixed-bottom quot  gt         lt div class  quot container quot  gt           lt span class  quot text-muted quot  gt Place sticky footer content here  lt  span gt         lt  div gt       lt  footer gt   CSS  footer       position  fixed      bottom  0

User · Answer

Here is a method that will add a sticky footer that doesn t require any additional CSS or Javascript other than what s already in Bootstrap and won t interfere with your current footer   Example here   Easy Sticky Footer  Just copy and paste this directly into your code   No fuss no muss    lt div class  navbar navbar-default navbar-fixed-bottom  gt       lt div class  container  gt         lt p class  navbar-text pull-left  gt    2014 - Site Built By Mr  M              lt a href  http   tinyurl com tbvalid  target   blank   gt HTML 5 Validation lt  a gt         lt  p gt          lt a href  http   youtu be zJahlKPCL9g  class  navbar-btn btn-danger btn pull-right  gt         lt span class  glyphicon glyphicon-star  gt  lt  span gt    Subscribe on YouTube lt  a gt       lt  div gt   lt  div gt

User · Answer

The current version of bootstrap doesn t seem to work for this function anymore  If you download their sticky-footer-navbar example and place a large amount of content in the main body area the footer will get pushed down past the bottom of the viewport  It isn t sticky at all

User · Answer

Based on Jek-fdrv s answer  I added an  on  resize   function   to make sure it works on every device and every resolution     window  on  resize   function         if    document  height    lt     window  height                 footer   addClass  navbar-fixed-bottom          else              footer   removeClass  navbar-fixed-bottom

User · Answer

You can simply try adding a class on your footer navbar   navbar-fixed-bottom   Then create a CSS named custom css and body padding like this    body   padding-bottom  70px

User · Answer

If yout want to use bootstrap build in classes for the footer  You should also write some javascript     document  ready function        fn resize footer         window  resize function           fn resize footer                 function           fn resize footer   function           body  gt   container-fluid   css  padding-bottom      body  gt  footer   height                 It will prevent content overlapping by the fixed footer  and it will adjust the padding-bottom when the user changes the window screen size   In the script above I assumed that footer is placed directly inside the body tag like that    lt body gt        content of your page        lt div class  navbar navbar-default navbar-fixed-bottom  gt       lt div class  container  gt         lt div class  muted pull-right  gt          Something useful        lt  div gt            some other footer content          lt  div gt     lt  div gt   lt  body gt    This is definitely not the best solution  because of the JS which could be avoided   but it works without any issues with overlapping  it is easy to implement and responsive  height is not hardcoded in CSS

User · Answer

Here is a very simple and clean sticky footer you can use in bootstrap  Totally Responsive   HTML   lt body gt   lt nav class  navbar navbar-default  gt     lt div class  container-fluid  gt       lt div class  navbar-header  gt         lt a class  navbar-brand  href     gt           lt img alt  Brand  src    gt         lt  a gt       lt  div gt     lt  div gt   lt  nav gt       lt footer gt  lt  footer gt   lt  body gt   lt  html gt    CSS  html       position  relative      min-height  100     body       margin  0 0 100px    footer       position  absolute      left  0      bottom  0      height  100px      width  100       background-color  red      Example  CodePen Demo

User · Answer

Here is my updated solution to this issue        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     border-top  1px solid  eee    text-align  center      site-footer-links     font-size  12px    line-height  1 5    color   777    padding-top  20px    display  block    text-align  center    float  center    margin  0    list-style  none       And use it like this     lt div class  footer  gt    lt div class  site-footer  gt     lt ul class  site-footer-links  gt           lt li gt    Zee and Company lt span gt  lt  span gt  lt  li gt     lt  ul gt    lt  div gt    lt  div gt    Or   html  body     height  100      page-wrap     min-height  100        equal to footer height      margin-bottom  -142px      page-wrap after     content        display  block     site-footer   page-wrap after     height  142px      site-footer     background  orange

User · Answer

The push div should go right after the wrap  NOT within   just like this       lt div id  wrap  gt     content goes here   lt  div gt    lt div id  push  gt   lt  div gt    lt div id  footer  gt     lt div class  container credit  gt     lt  div gt     lt div class  container  gt       lt p class  muted credit  gt    Your Page 2013 lt  p gt     lt  div gt   lt  div gt

User · Answer

Referring to the official Boostrap3 sticky footer example   there is no need to add  lt div id  push  gt  lt  div gt   and the CSS is simpler   The CSS used in the official example is      Sticky footer styles --------------------------------------------------     html  body     height  100        The html and body elements cannot have any padding or margin           Wrapper for page content to push down footer     wrap     min-height  100     height  auto       Negative indent footer by its height      margin  0 auto -60px       Pad bottom by footer height      padding  0 0 60px        Set the fixed height of the footer here     footer     height  60px    background-color   f5f5f5      and the essential HTML    lt body gt        lt  -- Wrap all page content here -- gt       lt div id  wrap  gt          lt  -- Begin page content -- gt         lt div class  container  gt          lt  div gt       lt  div gt        lt div id  footer  gt         lt div class  container  gt          lt  div gt       lt  div gt   lt  body gt    You can find the link for this css in the sticky-footer example s source code    lt  -- Custom styles for this template -- gt   lt link href  sticky-footer css  rel  stylesheet  gt    Full URL   http   getbootstrap com examples sticky-footer sticky-footer css

[html] Twitter Bootstrap 3 Sticky Footer

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3