How do I make a 960 sticky footer in Bootstrap?

Question

I'm still new to Bootstrap. If I'm designing within the 960 container and want the footer to fit correctly inside and stick to the bottom, how do I code that? Everything I find only applies to running the footer/nav across the entire view. Ive tried the github example and even my classmates aren't sure how to fix this.

Answer 1

Add this CSS below bootstrap.css reference:

 <!-- CSS -->
    <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's 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: 960px;

      }
      .container .credit {
        margin: 20px 0;
      }

    </style>

Then you can render the footer as follows:

<div id="footer">
      <div class="container">
        <p class="muted credit">Example </p>
      </div>
    </div>

NOTE: If you are experiencing problems try to set max-width: 680px; in .container at CSS code