Flushing footer to bottom of the page twitter bootstrap

Question

I am generally familiar with the technique of flushing a footer using css   But I am having some trouble getting this approach to work for Twitter bootstrap  most likely due to the fact that Twitter bootstrap is responsive in nature  Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post

User · Accepted Answer

Found the snippets here works really well for bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

User · Answer

Well I found mix of navbar-inner and   navbar-fixed-bottom   lt div id  footer  gt    lt div class  navbar navbar-inner  navbar-fixed-bottom  gt       lt p class  muted credit  gt  lt center gt ver 1 0 1 lt  center gt  lt  p gt    lt  div gt   lt  div gt    It seems good and works for me    See example in Fiddle

User · Answer

In the latest version of bootstrap 4 3  this can be done using  fixed-bottom class      lt div class  fixed-bottom  gt  lt  div gt    Here s how I use it with the footer     lt footer class  footer fixed-bottom container  gt           lt hr gt           lt p gt  amp copy  2017 Company  Inc  lt  p gt   lt  footer gt    You can find more information in the position documentation here

User · Answer

Tested with Bootstrap 3 6 6   HTML   lt div class  container footer navbar-fixed-bottom  gt     lt footer gt       lt  -- your footer content here -- gt     lt  footer gt   lt  div gt    CSS   footer     bottom  0    position  absolute

User · Answer

Use the navbar component and add  navbar-fixed-bottom class    lt div class  navbar navbar-fixed-bottom  gt  lt  div gt    add body       padding-bottom  70px

User · Answer

Use the below class to push it to last line of the page and also make it to center of it  If you are using ruby on rails HAML page you can make use of the below code   footer card text-center  Pls don t forget to use twitter bootstrapp

User · Answer

The simplest technique is probably to use Bootstrap navbar-static-bottom in conjunction with setting the main container div with height  100vh  new CSS3 view port percentage   This will flush the footer to the bottom    lt main class  container  style  height  100vh   gt    some content  lt  main gt         lt footer class  navbar navbar-default navbar-static-bottom  gt     lt div class  container  gt     lt p class  navbar-text navbar-left  gt  amp copy  Footer4U lt  p gt     lt  div gt   lt  footer gt

User · Answer

This is the right way to do it with Twitter Bootstrap and the new navbar-fixed-bottom class   you have no idea how long I spent looking for this   CSS   html     position  relative    min-height  100      content     padding-bottom  50px     footer  navbar    position  absolute      HTML    lt html gt     lt body gt       lt div id  content  gt     lt  div gt       lt div id  footer  gt         lt div class  navbar navbar-fixed-bottom  gt           lt div class  navbar-inner  gt             lt div class  container  gt               lt ul class  nav  gt                 lt li gt  lt a href     gt Menu 1 lt  a gt  lt  li gt                 lt li gt  lt a href     gt Menu 2 lt  a gt  lt  li gt               lt  ul gt             lt  div gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  body gt   lt  html gt

User · Answer

this works well  html   lt footer gt  lt  footer gt    css  html     position  relative    min-height  100     padding-bottom 90px    body     margin-bottom  90px    footer     position  absolute    bottom  0    width  100     height  90px

User · Answer

Use the flex utilities built into Bootstrap 4  Here s what I ve come up with using mostly Bootstrap 4 utilities    lt div class  d-flex flex-column  style  min-height  100vh   gt     lt header gt  lt  header gt     lt div class  container flex-grow-1  gt       lt div gt Some Content lt  div gt     lt  div gt     lt footer gt  lt  footer gt   lt  div gt      d-flex to make the main div a flex container  flex-column on the main div to arrange your flex items in a column min-height  100vh to the main div  either with a style attribute or in your CSS  to fill the viewport vertically  flex-grow-1 on the container  element to have the main content container take up all the space that remains in the viewport height

User · Answer

Here you ll find the approach in HAML   http   haml info    with navbar on top and footer at the bottom of the page     body    main  role   gt   main        header navbar navbar-fixed-top        nav navbar-inner          container            HEADER        container          BODY      footer navbar navbar-fixed-bottom        container          row            FOOTER

User · Answer

Bootstrap v4  solution  Here s a solution that doesn t require rethinking the HTML structure or any additional CSS trickery involving padding    lt html style  height 100    gt           lt body class  d-flex flex-column h-100  gt               lt main class  flex-grow-1  gt     lt  main gt       lt footer gt     lt  footer gt     lt  body gt         lt  html gt    Note that this solution allows for footers with flexible heights  which particularly comes in handy when designing pages for multiple screen sizes with content wrapping when shrunk   Why this works   style  height 100    makes the  lt html gt  tag take the whole space of the document  class d-flex sets display flex to our  lt body gt  tag  class flex-column sets flex-direction column to our  lt body gt  tag  Its children   lt header gt    lt main gt    lt footer gt  and any other direct child  are now aligned vertically  class h-100 sets height 100  to our  lt body gt  tag  meaning it will cover the entire screen vertically  class flex-grow-1 sets flex-grow 1 to our  lt main gt   effectively instructing it to fill any remaining vertical space  thus amounting to the 100  vertical height we set before on our  lt body gt  tag    Working demo here  https   codepen io maxencemaire pen VwvyRQB  See https   css-tricks com snippets css a-guide-to-flexbox  for more information on flexbox

User · Answer

A working example for Twitter bootstrap NOT STICKY FOOTER   lt script gt    document  ready function          var docHeight     window  height        var footerHeight       footer   height        var footerTop       footer   position   top   footerHeight       if  footerTop  lt  docHeight              footer   css  margin-top   10   docHeight - footerTop     px         lt  script gt    Version that always updates in case user opens devtools or resizes window    lt script gt        document  ready function             setInterval function                 var docHeight     window  height                var footerHeight       footer   height                var footerTop       footer   position   top   footerHeight              var marginTop    docHeight - footerTop   10                if  footerTop  lt  docHeight                      footer   css  margin-top   marginTop    px       padding of 30 on footer             else                     footer   css  margin-top    0px                   console log  docheight      docHeight     n     footerheight      footerHeight     n     footertop      footerTop     n     new docheight        window  height       n     margintop      marginTop              250            lt  script gt    You need at least an element with a  footer  When not want the scrollbar if content would fit to screen just change the value of 10 to 0 The scrollbar will show up if content not fits to screen

User · Answer

Use this piece of code in bootstrap it s works   lt div class  navbar fixed-bottom  gt   lt div class  container  gt    lt p class  muted credit  gt Footer  lt a href  http   google com  gt Link lt  a gt  and  lt a  href  http   google com   gt link lt  a gt   lt  p gt    lt  div gt    lt  div gt

User · Answer

You need to wrap your  container-fluid div in order for your sticky footer to work  you re also missing some properties on your  wrapper class  Try this   Remove the padding-top 70px from your body tag and include it in your  container-fluid instead  like so    wrapper  gt   container-fluid       padding-top  70px      We have to do this because pushing the body down to accommodate the navbar ends up pushing the footer a bit further  70px further  past the viewport so we get a scrollbar  We get better results pushing the  container-fluid div instead   Next we have to remove the  wrapper class outside your  container-fluid div and wrap your  main div with it  like so    lt div class  wrapper  gt       lt div id  main  class  container-fluid  gt           lt div class  row-fluid  gt     lt  div gt           lt div class  push  gt  lt  div gt       lt  div gt   lt  div gt      Your footer of course has to be out of the  wrapper div so remove it from the   wrapper div and place it outside  like so    lt div class  wrapper  gt            lt  div gt   lt footer class  container-fluid  gt            lt  footer gt  lt  --END  row-fluid-- gt    After thats all done  properly push your footer closer to your  wrapper class by using a negative margin  like so    wrapper       min-height  100       height  auto  important     ie7 fix        height  100       margin  0 auto -43px      And that should work  though you re probably going to have to modify a few other things to make it work when the screen is resized  like resetting the height on the  wrapper class  like so    media  max-width 480px        wrapper         height auto

User · Answer

Here is an example using css3   CSS   html  body       height  100       margin  0     wrap       padding  10px      min-height  -webkit-calc 100  - 100px          Chrome        min-height  -moz-calc 100  - 100px          Firefox        min-height  calc 100  - 100px          native       footer       position  relative      clear both      HTML    lt div id  wrap  gt       lt div class  container clear-top  gt         body content          lt  div gt   lt  div gt   lt footer class  footer  gt      footer content      lt  footer gt    fiddle

User · Answer

The only one that worked for me    html     position  relative    min-height  100     padding-bottom 90px    body     margin-bottom  90px    footer     position  absolute    bottom  0    width  100     height  90px

User · Answer

wrap   min-height  100   height  auto  important  height  100   width  100     Negative indent footer by its height   margin  0 auto -60px  position  fixed  left  0  top  0      The footer height matches the size of the bottom indent of the wrap element    footer   position  fixed  bottom  0  left  0  right  0  height  60px

User · Answer

another possible solution  just using media queries   media screen and  min-width 1px  and  max-width 767px         footer              no style for smaller or else it goes weird     media screen and  min-width 768px  and  max-width 991px         footer          bottom  0          width  100           position  absolute           media screen and  min-width 992px  and  max-width 1199px         footer          bottom  0          width  100           position  absolute           media screen and  min-width 1120px        footer          bottom  0          width  100           position  absolute

User · Answer

Here s a solution for the newest version of Bootstrap  4 3 at time of writing  using Flexbox   HTML    lt div class  wrapper  gt     lt div class  content  gt       lt p gt Content goes here lt  p gt     lt  div gt   lt  div gt   lt footer class  footer  gt  lt  footer gt    CSS   html  body     height  100      body     display  flex    flex-direction  column      wrapper     flex-grow  1      And a codepen example  https   codepen io tillytoby pen QPdomR

User · Answer

Here s how to implement this from the official page   http   getbootstrap com 2 3 2 examples sticky-footer html  I just tested it right now and it WORKS GREAT      HTML   lt body gt        lt  -- Part 1  Wrap all page content here -- 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  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   lt  body gt    The relevant CSS code is this      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 -30px        Set the fixed height of the footer here     push   footer       height  30px      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

User · Answer

This worked for me perfectly   Add this class navbar-fixed-bottom to your footer    lt div class  footer navbar-fixed-bottom  gt    I used it like this    lt div class  container-fluid footer navbar-fixed-bottom  gt   lt  -- start footer -- gt   lt  div gt    And it sets to bottom over the the full width   Edit  This will set footer to always visible  it s something you need to take in consideration

User · Answer

You can use jQuery to handle this     function                    Read the size of the window and reposition the footer at the bottom              var stickyFooter   function            var pageHeight      html   height            var windowHeight     window  height            var footerHeight      footer   outerHeight                A footer with  fixed-bottom  has the CSS attribute  position  absolute              and thus is outside of its container and counted in    html   height            var totalHeight      footer   hasClass  fixed-bottom                 pageHeight   footerHeight   pageHeight              If the window is larger than the content  fix the footer at the bottom          if  windowHeight  gt   totalHeight                return    footer   addClass  fixed-bottom              else                  If the page content is larger than the window  the footer must move              return    footer   removeClass  fixed-bottom                             Call when this script is first loaded      window onload   stickyFooter          Call again when the window is resized        window  resize function             stickyFooter

User · Answer

This one is the best   html     position  relative    min-height  100     padding-bottom 90px    body     margin-bottom  90px    footer     position  absolute    bottom  0    width  100     height  90px

User · Answer

This is how bootstrap does it   http   getbootstrap com 2 3 2 examples sticky-footer html  Just use page source and you should be able to see  Don  forget the  lt div id  wrap  gt  an the top

User · Answer

Keep it simple   footer     bottom  0    position  absolute      You may need to also offset the height of the footer by adding a margin-bottom equivalent to the footer height to the body

User · Answer

Per the Bootstrap 4 3 example  in case you re losing your sanity like I did  this is how it actually works    All parents of the footer div need to have height  100   h-100 class  The direct parent of the footer needs to have display  flex  d-flex class   The footer needs to have margin-top  auto  mt-auto class    The problem is that in modern front-end frameworks we often have additional wrappers around these elements   For example in my case  with Angular  I composed the view from a separate app root  main app component  and footer component - all of which added their custom element to the DOM    So  to make it work  I had to add classes to these wrapper elements  an additional h-100  moving the d-flex one level down  and moving the mt-auto one level up from the footer  so actually it s not on the footer class anymore  but on my  lt app-footer gt  custom element

User · Answer

HTML   lt div id  wrapper  gt      lt div id  content  gt       lt  -- navbar and containers here -- gt     lt  div gt      lt div id  footer  gt      lt  -- your footer here -- gt     lt  div gt    lt  div gt     CSS  html  body     height  100       wrapper     min-height  100     position  relative      content     padding-bottom  100px     Height of the footer element        footer     width  100     height  100px     Adjust to the footer needs      position  absolute    bottom  0    left  0

User · Answer

This is now included with Bootstrap 2 2 1   Bootstrap 3 x  Use the navbar component and add  navbar-fixed-bottom class     lt div class  navbar navbar-fixed-bottom  gt  lt  div gt    Bootstrap 4 x   lt div class  navbar fixed-bottom  gt  lt  div gt    Don t forget to add body   padding-bottom  70px    or otherwise the page content may be covered   Docs  http   getbootstrap com components  navbar-fixed-bottom

User · Answer

It looks like the height 100   chain  is being broken at div main   Try adding height 100  to it and that may get you closer to your goal

User · Answer

HenryW s answer is good  though I needed a few tweaks to get it working how I wanted  In particular the following also handles    Avoiding the  jumpiness  on page load by first marking invisible and setting visible in javascript Dealing with browser resizes gracefully Additionally setting the footer back up the page if the browser gets smaller and the footer becomes bigger than the page Height function tweaks   Here s what worked for me with those tweaks   HTML    lt div id  footer  class  invisible  gt My sweet footer lt  div gt    CSS    footer       padding-bottom  30px      JavaScript   function setFooterStyle         var docHeight     window  height        var footerHeight       footer   outerHeight        var footerTop       footer   position   top   footerHeight      if  footerTop  lt  docHeight                footer   css  margin-top    docHeight - footerTop     px          else               footer   css  margin-top                      footer   removeClass  invisible        document  ready function         setFooterStyle        window onresize   setFooterStyle

User · Answer

For Sticky Footer we use two DIV s in the HTML for basic sticky footer effect  Write like this   HTML   lt div class  container  gt  lt  div gt    lt div class  footer  gt  lt  div gt    CSS  body html       height 100      container       min-height 100      footer       height 40px      margin-top -40px

User · Answer

to handle width constraint layouts use the following so that you do not get rounded corners  and so that your nav bar will be flush to the sides of the application   lt div class  navbar navbar-fixed-bottom  gt       lt div class  navbar-inner  gt           lt div class  width-constraint clearfix  gt               lt p class  pull-left muted credit  gt YourApp v1 0 0 lt  p gt                lt p class  pull-right muted credit  gt   2013     CONFIDENTIAL ALL RIGHTS RESERVED lt  p gt           lt  div gt       lt  div gt   lt  div gt    then you can use css to override the bootstrap classes to adjust height  font  and color       navbar-fixed-bottom         font-size  12px        line-height  18px             navbar-fixed-bottom  navbar-inner           min-height  22px             navbar-fixed-bottom  p           margin  2px 0 2px

User · Answer

Much simpler official example  http   getbootstrap com examples sticky-footer-navbar   html     position  relative    min-height  100     body     margin-bottom  60px     footer     position  absolute    bottom  0    width  100     height  60px    background-color   f5f5f5

[css] Flushing footer to bottom of the page, twitter bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to footer