title: Bootstrap 3 and Sticky Footer
body: <p>for the past hour I've been trying to figure out what exactly is wrong with my sticky footer not working. I have the exact same structure as the example given on the getboostrap site, but it doesn't seem to work. Any ideas what is exactly wrong?</p>
  
  <p>All the bootstrap css files are loaded correctly.</p>
  
  <pre><code>    &lt;body style=""&gt;
  
      &lt;div id="wrap"&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="/"&gt;Application name&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="collapse navbar-collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Home/About"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Home/Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                          &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="/Account/Register" id="registerLink"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/Account/Login" id="loginLink"&gt;Log in&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="container"&gt;
  
  
  
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;ASP.NET&lt;/h1&gt;
      &lt;p class="lead"&gt;ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.&lt;/p&gt;
      &lt;p&gt;&lt;a href="http://asp.net" class="btn btn-primary btn-large"&gt;Learn more »&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Getting started&lt;/h2&gt;
          &lt;p&gt;
              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.
          &lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865"&gt;Learn more »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Get more libraries&lt;/h2&gt;
          &lt;p&gt;NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866"&gt;Learn more »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Web Hosting&lt;/h2&gt;
          &lt;p&gt;You can easily find a web hosting company that offers the right mix of features and price for your applications.&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867"&gt;Learn more »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
          &lt;div class="container"&gt;
              &lt;p class="text-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;
  </code></pre>
  
  <p>I found the solution. I thought including all the CSS would also have the CSS for the footer but apparently it does not. You require the following to make a sticky footer work with bootstrap</p>
  
  <pre><code>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;
  }
  </code></pre>