title: Placing a footer dynamic always to bottom
body: <p>I have a website based on bootstrap. every site has unique content and a unique height.</p>
  
  <p>I have a footer and placed it on my index and the result was that: </p>
  
  <p><img src="https://i.stack.imgur.com/xG0vc.png" alt="enter image description here"></p>
  
  <p>Well that was exactly what i needed but then i tried to implement the footer in another site which were shorter and my footer flought in the air.</p>
  
  <p><img src="https://i.stack.imgur.com/9tGzi.png" alt="enter image description here"></p>
  
  <p>As you can see the footer appears after my text but i want to have the footer always on every site at the bottom. If there is not so much text content it should move to the closest bottom position so withou getting scrollbars.</p>
  
  <p>How can i do this?
  PS: Im really fresh to html/css</p>
  
  <p>Footer.css</p>
  
  <pre><code>.bottom {
      background-color: #474747;
  }
  .bottom .container {
      background-color: #373737;
      min-height: 130px;
  }
  .bottom .container h3 {
      color: #999;
  }
  .bottom .container p {
      color: #666;
  }
  </code></pre>
  
  <p>Snippet outside second screenshot</p>
  
  <p>.
  .
  .</p>
  
  <pre><code>&lt;footer&gt;
  &lt;!-- Site footer --&gt;
      &lt;div class="bottom"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;h3&gt;&lt;span class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt; Unternehmen&lt;/h3&gt;
                  &lt;p&gt;Text Text&lt;/br&gt;
                  Text Text&lt;/br&gt;
                  Text Text&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;h3&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt; Links&lt;/h3&gt;
                  &lt;a href="Text Text.htm"&gt;Text Text&lt;/a&gt;&lt;br&gt;
                  &lt;a href="Text Text.htm"&gt;Text Text&lt;/a&gt;&lt;/br&gt;
                  &lt;a href="http://icons8.com/"&gt;Icons8&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;h3&gt;&lt;span class="glyphicon glyphicon-send"&gt;&lt;/span&gt; Kontakt&lt;/h3&gt;                
                    &lt;a href="tel:+"&gt;Text Text&lt;/a&gt;&lt;br&gt;
                    &lt;a href="mailto:mail&gt;Text@text.de&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/footer&gt; 
  
          &lt;!-- Bootstrap-JavaScript
      ================================================== --&gt;
      &lt;!-- Am Ende des Dokuments platziert, damit Seiten schneller laden --&gt;
      &lt;script src="./js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="./js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>