Menu
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...
276
just add the class navbar-fixed-bottom to your footer. If you have header and footer, you loose too much space on a mobile device. This works perfectly if page doesn't need a scroll. But the footer overlaps with more content on the page.
Make Footer Sticky To make your footer stick to the bottom of the viewport, add classes d-flex , flex-column , and h-100 to the body tag. Also add class h-100 to <html> tag.
Bootstrap3 footer is an additional navigation method for websites. It can hold links, buttons, company info, copyrights, forms and many other elements. You can set the color of the footer by adding one of the classes from our color palette.
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:
<!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> 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/
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
