Geek Answers Handbook

Bootstrap 3 and a sticky footer

in the past hour, I have been trying to figure out what exactly is wrong with my sticky footer not working. I have the same structure as the example provided on the getboostrap website, but it does not seem to work. Any ideas what exactly is wrong?

All downloadable cssstrap files are loaded.

<body style=""> <div id="wrap"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Application name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/Home/About">About</a></li> <li><a href="/Home/Contact">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/Account/Register" id="registerLink">Register</a></li> <li><a href="/Account/Login" id="loginLink">Log in</a></li> </ul> </div> </div> </div> <div class="container"> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <p> ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and gives you full control over markup for enjoyable, agile development. </p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> </div> <div class="col-md-4"> <h2>Get more libraries</h2> <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p> </div> <div class="col-md-4"> <h2>Web Hosting</h2> <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p> </div> </div> </div> </div> <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> </body>

I have found a solution. I thought all CSS would also have CSS for the footer, but apparently this is not the case. You need to follow these steps to make a sticky footer using bootstrap

 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 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; }
+7
twitter-bootstrap twitter-bootstrap-3
source share
7 answers

Why do not you use:

 .navbar-fixed-bottom

This will solve your problem with fixed navigation, and you can place anything in it.

+11
source share

Made a quick script with your code and some settings in the footer: http://jsfiddle.net/2Zaxt/ .

 <div id="footer" class="container"> <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="navbar-inner navbar-content-center"> <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> </nav> </div>
+7
source share
 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 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; }
+6
source share

Here's how it worked for me.

I added the footer id and custom style values ​​to this id, and for the same look and style I added "navbar-default"

HTML

 <div id="footer" class="navbar-default"> <div class="container"> <p>Your Footer Content Here</p> </div> </div>

CSS

 #footer { background-color: #F5F5F5; bottom: 0; height: 60px; position: relative; width: 100%; }
+1
source share

In the download documentation, you can find an example for a “sticky footer with fixed navigation” (fixed at the top of the page): http://getbootstrap.com/examples/sticky-footer-navbar/

CSS

 /* Sticky footer styles */ 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; } /* Fixed navbar styles */ body > .container { padding-top: 60px; }
+1
source share

Simple unique solution for sticky footers on @ teh0wner, I added some JS

CSS

 html { position: relative; min-height: 100%; } footer { position: absolute; bottom: 0; width: 100%; }

Js

 $(document).ready(function() { var height = $('footer').height(); $('body').css({ "margin-bottom": height }); });
+1
source share

In bootstrap 3, the container and footer classes, somehow redefine your css rules. I tried changing the background color of the footer. I tried many things that I found as solutions on the Internet and could not do it successfully. After using the clearfix class for the footer, the page became what I really want to see.

 .myFooter { background-color: #c4a9f1; width: 100%; } .hi-icon a { display: block; width: 100%; height: 100%; position: absolute; top: 0px; z-index: 100; } 
 <footer class="footer clearfix"> <div class="container myFooter"> <div class=" "> <div class="col-sm-3"> <h3 class="page-header">Part 1 </h3> <ul> <li>Link1</li> <li>Link2</li> <li>Link3</li> <li>Link4</li> </ul> </div> <div class="col-sm-3"> <h3 class="page-header">Part 2</h3> <ul> <li>Link1</li> <li>Link2</li> <li>Link3</li> <li>Link4</li> </ul> </div> </div> </div> </div> </footer>
0
source share

More articles:


All Articles