title: sticky bootstrap footer overlapping content of page
body: <p>I am using bootstrap 3.0, I have sticky footer placed at bottom of my page.Footer is overlapping content of page in phone and tablet view.</p>
  
  <p>footer code is written below:</p>
  
  <pre><code>html {
    position: relative;
    min-height: 100%;
  }
  body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
  }
  
  #footer 
  {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f1f1f1;
  }
  
  #push
  {
      height: 60px;
  }
  
  #wrap {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      /* Negative indent footer by it's height */
      margin: 0 auto -60px;
  }
  /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
      #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
      }
      }
  </code></pre>
  
  <p>basic page Skeleton:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  &lt;div class="navbar navbar-default navbar-static-top" role="navigation"&gt;
  &lt;div class="container"&gt;
  .....
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container"&gt;
  ......
  &lt;/div&gt;
  &lt;/div&gt; &lt;!-- End -Wrap --&gt;
  &lt;div id="push"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;
      &lt;div class="container"&gt;
              ....
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please tell me what kind of changes i need to do i my code.</p>