Best IT Recipes

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

With or without a header, it’s very common for sites to have a sticky footer. Bootstrap has the ability to easily create fixed footers, but there is no such tool for creating sticky footers.

As a result of this question, it turns out that hundreds, if not thousands of developers, have the same question, but without a good answer.

Ironically, the Bootstrap documentation page has a sticky footer next to the bootstrap style and a fixed top navigation bar. All of this is custom css, although it is not part of the framework. So the obvious way is to take and reorganize your style, as it clearly works well within Bootstrap, but it seems more painful than it should be.

See this plunkr for an example page with a Bootstrap top navigation bar and an unwanted, non-sticky footer.

Problem:

(Thanks Softlayer - for graphics )

A non-sticky footer is pretty ugly

Solution Required:

A sticky footer is always at the bottom

Of course, the footer should be responsive and cross-browser as well ...

+73
css twitter-bootstrap twitter-bootstrap-3 sticky-footer
Nov 03 '13 at 19:22
source share
12 answers

The answer, as Shmalsi points out, can be found here in the getbootstrap sample site section.

But this example does not include top navigation. For a fixed nav header with a sticky footer, see this plnkr or code below.

CSS style:

/* 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:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> <title>Sticky Footer Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="style.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy this line! --> <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- Wrap all page content here --> <div id="wrap"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> </div> </div><!-- Wrap Div end --> <div id="footer"> <div class="container"> <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> </body> </html>
+76
Nov 03 '13 at 21:17
source share

Sticky footer solutions that rely on fixed-height footers go out of fashion using responsive approaches (where footer heights often change at different points in the fault). The simplest responsive sticky footer solution I've seen involves using display: table in a top level container, for example:

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/

+24
May 23 '14 at 15:53
source share

The best way is to do the following:
HTML: Sticky Footer
CSS: CSS for Sticky Footer
Sample HTML code:

 <div class="container"> <div class="page-header"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> </div> <footer class="footer"> <div class="container"> <p class="text-muted">Place sticky footer content here.</p> </div> </footer>

CSS sample code:

  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 small tweak can make it more advanced (depending on your project), so it won’t affect the 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%;}}
+19
Dec 24 '14 at 10:40
source share

I was looking for an easy way to make a sticky footer. I just applied class="navbar-fixed-bottom " and it worked instantly. The only thing to keep in mind is to configure the footer settings for mobile devices. Hurrah!

+14
Jul 09 '15 at 14:37
source share

For those looking for an easy 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 around with body margin-bottom to add space between content and footer.

+6
Jul 28 '16 at 14:33
source share

I will talk about what robodo said in one of the comments above that it is very fast and beautiful and, more importantly, a responsive (not fixed height) approach that is not related to hacks is to use flexbox. If you are not limited to browsers, this is a great solution.

HTML

 <body> <div class="site-content"> Site content </div> <footer class="footer"> Footer content </footer> </body>

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 solutions to problems using flexbox: https://github.com/philipwalton/solved-by-flexbox

+2
Jan 07 '17 at 22:28
source share

Not sure what you have tried so far, but it's pretty simple. Just do this: http://plnkr.co/edit/kmEWh7?p=preview

 html, body { height: 100%; } footer { position: absolute; bottom: 0; }
+1
Nov 03 '13 at 20:57
source share

Since in bootstrap 3 the site will use jQuery. Thus, the solution may also be as follows, rather than trying to play with complex CSS:

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <style> .my-footer { border-radius : 0px; margin : 0px; /* pesky margin below .navbar */ position : absolute; width : 100%; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <!-- Content of any length --> asdfasdfasdfasdfs <br /> asdfasdfasdfasdfs <br /> asdfasdfasdfasdfs <br /> </div> </div> <div class="navbar navbar-inverse my-footer"> <div class="container-fluid"> <div class="row"> <p class="navbar-text">My footer content goes here...</p> </div> </div> </div> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(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' }); }); </script> </body> </html>

A different approach to this, I hope this helps.

Sincerely.

+1
Aug 01 '14 at 7:57
source share

easy to install

 position:absolute; bottom:0; width:100%;

to your .footer

just do it

+1
Jul 02 '15 at 7:00
source share

What worked for me was adding a position relative to the html tag.

 html { min-height:100%; position:relative; } body { margin-bottom:60px; } footer { position:absolute; bottom:0; height:60px; }
0
Apr 6 '17 at 8:52
source share

If your html has a (rough) structure:

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

then the simplest css that sets the footer at the bottom of the screen,

 html, body { height: 100%; } .wrapper { min-height: calc(100vh - 80px); } .footer { height: 80px; }

... where the footer height is 80 pixels. calc calculates the height of the wrapper equal to the height of the window minus the height of the footer (80 pixels) that is outside of .wrapper

0
Jul 08 '17 at 17:20
source share
  <style type="text/css"> /* 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 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; } </style> <div id="wrap"> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p> </div> <div id="push"></div> </div> <div id="footer"> <div class="container"> <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div>
-one
Dec 31 '14 at 8:57
source share


More articles:


All Articles