CODEWITHSUNDEEP
csstwitter-bootstrapfooter
Calvin Cheng
Calvin Cheng

Reputation: 36506

Flushing footer to bottom of the page, twitter bootstrap

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.

Upvotes: 348

Views: 720908

Answers (30)

david
david

Reputation: 612

Bootstrap 5

Add these classes

<body class="d-flex flex-column min-vh-100">

<footer class="footer mt-auto">

Reference: https://radu.link/make-footer-stay-bottom-page-bootstrap/

Upvotes: 1

Rasaf Ibrahim
Rasaf Ibrahim

Reputation: 2257

Keep the footer at the bottom by using Bootstrap 5


    <div class="min-vh-100 d-flex flex-column 
                justify-content-between">
     
         <div> <!-- Wrapper (Without footer) -->
       
            <header>
             I am a header.
            </header>
      
            <article>
            I am an article!
            </article>
       
        </div> <!-- End: Wrapper (Without footer) -->
     
     
         <footer>
         I am a footer.
         </footer>
     
    </div>

Live Demo in CodePen

Note

  • Make sure that you are wrapping everything in a <div> or any other block-level element with the following Bootstrap classes: min-vh-100, d-flex,flex-column,justify-content-between .

  • Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element.

  • Make sure that you using <footer> or any other block-level element to wrap the footer.

Code Explanation

  • min-vh-100 ensures that the body element will stretch to at least the full height of the screen

  • flex-column keeps the behavior of normal document flow in terms of retaining stacked block elements (which assumes direct children of the body are all indeed block elements).

  • justify-content-between pushes the footer to the bottom of the screen.

Check out how to do the same (Keeping the footer at the bottom) with just CSS - Link

Upvotes: 31

EGhost57
EGhost57

Reputation: 331

Use the flex utilities built into Bootstrap 4! Here's what I've come up with using mostly Bootstrap 4 utilities.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .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.

Upvotes: 33

Kathandrax
Kathandrax

Reputation: 1054

Bootstrap v4+ solution

Here's a solution that doesn't require rethinking the HTML structure or any additional CSS trickery involving padding:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

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 <html> tag take the whole space of the document.
  • class d-flex sets display:flex to our <body> tag.
  • class flex-column sets flex-direction:column to our <body> tag. Its children (<header>, <main>, <footer> and any other direct child) are now aligned vertically.
  • class h-100 sets height:100% to our <body> tag, meaning it will cover the entire screen vertically.
  • class flex-grow-1 sets flex-grow:1 to our <main>, effectively instructing it to fill any remaining vertical space, thus amounting to the 100% vertical height we set before on our <body> 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.

Upvotes: 7

S Kranthi Kumar
S Kranthi Kumar

Reputation: 750

Use this piece of code in bootstrap it's works

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

Upvotes: 2

Temi
Temi

Reputation: 257

this works well

html

<footer></footer>

css

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

Upvotes: 0

Chuan Yeong
Chuan Yeong

Reputation: 3639

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;
}

Upvotes: 339

Camilo
Camilo

Reputation: 9

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;
}

Upvotes: -1

Miguel Carvalhais Matos
Miguel Carvalhais Matos

Reputation: 1143

HTML

<div id="wrapper">

  <div id="content">
    <!-- navbar and containers here -->
  </div>

  <div id="footer">
   <!-- your footer here -->
  </div>

</div>

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;
}

Upvotes: -1

Leaky
Leaky

Reputation: 3636

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 <app-footer> custom element).

Upvotes: 4

HenryW
HenryW

Reputation: 3761

A working example for Twitter bootstrap NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Version that always updates in case user opens devtools or resizes window.

<script>
    $(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 < 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);
    });
</script>

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.

Upvotes: 90

Mohamed Ali JAMAOUI
Mohamed Ali JAMAOUI

Reputation: 14689

In the latest version of bootstrap 4.3, this can be done using .fixed-bottom class. 

<div class="fixed-bottom"></div>

Here's how I use it with the footer: 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

You can find more information in the position documentation here.

Upvotes: 30

Tom T
Tom T

Reputation: 361

Here's a solution for the newest version of Bootstrap (4.3 at time of writing) using Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

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

Upvotes: 1

sanon
sanon

Reputation: 6491

This is now included with Bootstrap 2.2.1.

Bootstrap 3.x

Use the navbar component and add .navbar-fixed-bottom class: 

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

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

Upvotes: 520

Sunil Kumar
Sunil Kumar

Reputation: 418

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

Upvotes: 0

sandeep
sandeep

Reputation: 92793

For Sticky Footer we use two DIV's in the HTML for basic sticky footer effect. Write like this:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

Upvotes: 38

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

Well I found mix of navbar-inner and navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

It seems good and works for me

enter image description here

See example in Fiddle

Upvotes: 22

Dušan Maďar
Dušan Maďar

Reputation: 9869

Tested with Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

Upvotes: 3

sp_omer
sp_omer

Reputation: 331

This worked for me perfectly.

Add this class navbar-fixed-bottom to your footer.

<div class="footer navbar-fixed-bottom">

I used it like this:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

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.

Upvotes: 12

GeorgeWL
GeorgeWL

Reputation: 322

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;
    }
}

Upvotes: 0

Cory
Cory

Reputation: 24260

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:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

Upvotes: 15

Admin File3
Admin File3

Reputation: 117

Use the navbar component and add .navbar-fixed-bottom class:

<div class="navbar navbar-fixed-bottom"></div>

add body 

  { padding-bottom: 70px; }

Upvotes: 4

Pan Wangperawong
Pan Wangperawong

Reputation: 1250

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.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

Upvotes: 3

Ricardo
Ricardo

Reputation: 21

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;
}

Upvotes: 2

user
user

Reputation: 18529

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;
}

Upvotes: 31

Bren
Bren

Reputation: 3686

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 <div id="wrap"> an the top.

Upvotes: 0

Victor
Victor

Reputation: 5121

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:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

fiddle

Upvotes: 0

originalhat
originalhat

Reputation: 1716

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.

Upvotes: 1

Hannes
Hannes

Reputation: 2501

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 => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

Upvotes: 0

DucCuong
DucCuong

Reputation: 648

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 >= 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();
    });
});

Upvotes: 3

Related Questions