How to create a sticky footer that plays well with Bootstrap 3

Question

With or without a top nav  it is very common for sites to have a sticky footer   Bootstrap has a facility to easily create fixed footers  but no such facility for creating sticky footers - there is a big difference   Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer   Ironically  the Bootstrap documentation page itself has a sticky footer alongside bootstrap styling and a fixed top navbar   It s all custom css though  and not part of the framework   So an obvious route is to take and refactor their custom styling  since it obviously plays well within the Bootstrap framework  but that seems more painful than it ought to be   See this plunkr for an example page with a Bootstrap top navbar  and an undesirable  non-sticky footer   Problem    Thanks Softlayer - for the graphics     Desired Solution     Of course the footer should be responsive and cross-browser friendly as well

User · Answer

I ve been searching for a simple way to make the sticky footer works  I just applied a class  navbar-fixed-bottom  and it worked instantly Only thing to keep in mind it s to adjust the settings of the footer for mobile devices  Cheers

User · Answer

What worked for me was adding the position relative to the html tag   html     min-height 100     position relative    body     margin-bottom 60px    footer     position absolute    bottom 0    height 60px

User · Answer

Since it s in bootstrap 3  the site will be using jQuery  So the solution could also be the following  instead of trying to play with complex CSS    lt  DOCTYPE html gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt  lt  title gt       lt link href  css bootstrap min css  rel  stylesheet    gt       lt style gt           my-footer               border-radius   0px              margin   0px     pesky margin below  navbar                position   absolute              width   100                  lt  style gt   lt  head gt   lt body gt       lt div class  container-fluid  gt           lt div class  row  gt               lt  -- Content of any length -- gt              asdfasdfasdfasdfs  lt br   gt              asdfasdfasdfasdfs  lt br   gt              asdfasdfasdfasdfs  lt br   gt           lt  div gt       lt  div gt        lt div class  navbar navbar-inverse my-footer  gt           lt div class  container-fluid  gt               lt div class  row  gt                   lt p class  navbar-text  gt My footer content goes here    lt  p gt               lt  div gt           lt  div gt       lt  div gt        lt script src  js jquery-1 11 0 min js  gt  lt  script gt       lt script src  js bootstrap min js  gt  lt  script gt        lt script type  text javascript  gt            document  ready function                  var  docH     document  height                   The document height will grow as the content on the page grows                  my-footer   css                                      The default height of  navbar is 50px with a 1px border                  change this 52 if you change the height of your footer                                     top    docH - 52     px                                   lt  script gt   lt  body gt   lt  html gt    A different take on it  hope it helps   Kind regards

User · Answer

In case your html has the  rough  structure    lt div class  wrapper  gt      lt div gt      lt  div gt             lt div gt      lt  div gt   lt  div gt   lt div class  footer  gt          lt  div gt    then the simplest css that fixes footer to the bottom of your screen is   html  body       height  100      wrapper     min-height  calc 100vh - 80px      footer      height  80px          where the height of the footer is 80px  calc calculates the height of the wrapper  to be equal to the window s height minus the height of the footer  80px  which is out of the  wrapper

User · Answer

Sticky footer solutions that rely upon fixed-height footers are falling out of favour in with responsive approaches  where the height of the footer often changes at different break points   The simplest responsive sticky footer solution I ve seen involves using display  table on a top-level container  e g    http   galengidman com 2014 03 25 responsive-flexible-height-sticky-footers-in-css   http   timothy-long com responsive-sticky-footer   http   www visualdecree co uk posts 2013 12 17 responsive-sticky-footers

User · Answer

The best way is to do the following  HTML Sticky Footer CSS  CSS for Sticky Footer HTML Code Sample    lt div class  container  gt     lt div class  page-header  gt       lt h1 gt Sticky footer 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  lt  p gt     lt p gt Use  lt a href     sticky-footer-navbar  gt the sticky footer with a fixed navbar lt  a gt  if need be  too  lt  p gt   lt  div gt    lt footer class  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    CSS Code Sample       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      Another little tweak might make it more perfect  depends on your project   so it will not affect footer on mobile views    media  max-width 768px    footer position absolute width 100       media  min-width 768px    footer position absolute bottom 0 height 60px width 100

User · Answer

The answer  as Schmalzy points out  can be found here in the examples section of the getbootstrap site   But that example does not include a top nav   For fixed top nav with sticky footer  see this plnkr  or code below   Style CSS      Styles go here        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         Custom page CSS --------------------------------------------------       Not required for template or sticky footer method       container     width  auto    max-width  680px    padding  0 15px     container  credit     margin  20px 0      Index html    lt  DOCTYPE html gt   lt html lang  en  gt     lt head gt       lt meta charset  utf-8  gt       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt meta name  description  content    gt       lt meta name  author  content    gt       lt link rel  shortcut icon  href        docs-assets ico favicon png  gt        lt title gt Sticky Footer Template for Bootstrap lt  title gt        lt  -- Bootstrap core CSS -- gt       lt link href    netdna bootstrapcdn com bootstrap 3 0 1 css bootstrap min css  rel  stylesheet  gt        lt  -- Custom styles for this template -- gt       lt link href  style css  rel  stylesheet  gt        lt  -- Just for debugging purposes  Don t actually copy this line  -- gt       lt  -- if lt IE 9  gt  lt script src        docs-assets js ie8-responsive-file-warning js  gt  lt  script gt  lt   endif -- gt        lt  -- HTML5 shim and Respond js IE8 support of HTML5 elements and media queries -- gt       lt  -- if lt IE 9  gt         lt script src  https   oss maxcdn com libs html5shiv 3 7 0 html5shiv js  gt  lt  script gt         lt script src  https   oss maxcdn com libs respond js 1 3 0 respond min js  gt  lt  script gt       lt   endif -- gt     lt  head gt      lt body gt        lt  -- Wrap all page content here -- gt       lt div id  wrap  gt    lt nav class  navbar navbar-default  role  navigation  gt     lt  -- Brand and toggle get grouped for better mobile display -- gt     lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  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 Brand lt  a gt     lt  div gt      lt  -- Collect the nav links  forms  and other content for toggling -- gt     lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt       lt ul class  nav navbar-nav  gt         lt li class  active  gt  lt a href     gt Link lt  a gt  lt  li gt         lt li gt  lt a href     gt Link 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 gt  lt a href     gt Separated link lt  a gt  lt  li gt             lt li class  divider  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 form class  navbar-form navbar-left  role  search  gt         lt div class  form-group  gt           lt input type  text  class  form-control  placeholder  Search  gt         lt  div gt         lt button type  submit  class  btn btn-default  gt Submit lt  button gt       lt  form gt       lt ul class  nav navbar-nav navbar-right  gt         lt li gt  lt a href     gt Link 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 gt  lt a href     gt Separated link lt  a gt  lt  li gt           lt  ul gt         lt  li gt       lt  ul gt     lt  div gt  lt  --   navbar-collapse -- gt   lt  nav gt          lt  -- Begin page content -- gt         lt div class  container  gt            lt div class  page-header  gt             lt h1 gt Sticky footer 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  lt  p gt           lt p gt Use  lt a href     sticky-footer-navbar  gt the sticky footer with a fixed navbar lt  a gt  if need be  too  lt  p gt         lt  div gt       lt  div gt  lt  -- Wrap Div end -- gt        lt div id  footer  gt         lt div class  container  gt           lt p class  text-muted credit  gt Example courtesy  lt a href  http   martinbean co uk  gt Martin Bean lt  a gt  and  lt a href  http   ryanfait com sticky-footer   gt Ryan Fait lt  a gt   lt  p gt         lt  div gt       lt  div gt         lt  -- Bootstrap core JavaScript                                                        -- gt       lt  -- Placed at the end of the document so the pages load faster -- gt     lt  body gt   lt  html gt

User · Answer

easily set   position absolute  bottom 0  width 100     to your  footer   just do it

User · Answer

Not sure what you have tried so far  but its pretty simple  Just do this  http   plnkr co edit kmEWh7 p preview  html  body     height  100      footer     position  absolute    bottom  0

User · Answer

For those who are searching for a light answer  you can get a simple working example from here   html       position  relative      min-height  100     body       margin-bottom  60px    Height of the footer      footer       position  absolute      bottom  0      width  100       height  60px    Example value        Just play with the body s margin-bottom for adding space between the content and footer

User · Answer

I will elaborate on what robodo said in one of the comments above  a really quick and good looking and what is more important  responsive  not fixed height  approach that does not involve any hacks is to use flexbox  If you re not limited by browsers support it s a great solution   HTML   lt body gt     lt div class  site-content  gt      Site content    lt  div gt     lt footer class  footer  gt      Footer content    lt  footer gt   lt  body gt    CSS  html     height  100     body     min-height  100     display  flex    flex-direction  column     site-content     flex  1      Browser support can be checked here  http   caniuse com  feat flexbox  More common problem solutions using flexbox  https   github com philipwalton solved-by-flexbox

User · Answer

lt style type  text css  gt           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  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   f5f5f5                  Lastly  apply responsive CSS fixes as necessary          media  max-width  767px            footer            margin-left  -20px           margin-right  -20px           padding-left  20px           padding-right  20px                             Custom page CSS      --------------------------------------------------            Not required for template or sticky footer method            container          width  auto         max-width  680px               container  credit          margin  20px 0              lt  style gt     lt div id  wrap  gt      lt  -- Begin page content -- gt     lt div class  container  gt       lt div class  page-header  gt         lt h1 gt Sticky footer 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  lt  p gt       lt p gt Use  lt a href    sticky-footer-navbar html  gt the sticky footer lt  a gt  with a fixed navbar if need be  too  lt  p gt     lt  div gt      lt div id  push  gt  lt  div gt   lt  div gt    lt div id  footer  gt     lt div class  container  gt       lt p class  muted credit  gt Example courtesy  lt a href  http   martinbean co uk  gt Martin Bean lt  a gt  and  lt a href  http   ryanfait com sticky-footer   gt Ryan Fait lt  a gt   lt  p gt     lt  div gt   lt  div gt

[css] How to create a sticky footer that plays well with Bootstrap 3

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to sticky-footer