title: Bootstrap footer at the bottom of the page
body: <p>I have read a lot of posts about this but I still didn't find an answer.
  <strong>I have a footer that I want to be at the end of the page, not fixed.</strong>
  The problem is that the footer is where the content ends. Look at picture.
  <a href="https://i.stack.imgur.com/bThVl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bThVl.png" alt="enter image description here"></a></p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"/&gt;
          &lt;title&gt; Mobtech - Privatni korisnici &lt;/title&gt;
  
          &lt;!--Ubaci bootstrap css --&gt;
          &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
          &lt;link rel="css/basic-template.css" rel="stylesheet"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--Navigation bar --&gt;
          &lt;nav class="navbar navbar-default" role="navigation"&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-container"&gt;
                          &lt;span class="sr-only"&gt; Pokazi i sakrij navigaciju &lt;/span&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;
                           &lt;span&gt; &lt;img src="Slike/logo.png" alt="LogoSlika"/&gt; &lt;/span&gt;
                          &lt;font face="Roboto Condensed" size="4" color="green"&gt; Mobtech &lt;/font&gt;
                      &lt;/a&gt;
                  &lt;/div&gt; 
                  &lt;div class="collapse navbar-collapse" id="navbar-container"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt; Početna strana &lt;/a&gt; &lt;/li&gt;
                          &lt;li class="active"&gt;&lt;a href="#"&gt; Privatni korisnici &lt;/a&gt; &lt;/li&gt;
                          &lt;li&gt;&lt;a href="poslovni.html"&gt; Poslovni korisnici &lt;/a&gt; &lt;/li&gt;
                          &lt;li&gt;&lt;a href="uredjaji.html"&gt; Uređaji &lt;/a&gt; &lt;/li&gt;
                          &lt;li&gt;&lt;a href="onama.html"&gt; O Nama &lt;/a&gt; &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;br /&gt;
              &lt;div class="container"&gt; &lt;!--Container --&gt;
  
                  &lt;div class="row"&gt;
                      &lt;!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone --&gt;
                      &lt;div class="col-lg-12 bg-success"&gt; 
                          &lt;p&gt; Outer div &lt;/p&gt;
                          &lt;div class="col-lg-6 bg-primary"&gt;
                              &lt;p&gt; Inner div &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Footer --&gt;
              &lt;footer class="mojFooter"&gt;
                  &lt;font face="Roboto Condensed" size="4"&gt; &lt;center&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row" style="margin-top: 7px;"&gt;
                           &lt;p&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp;  &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;copy; Copyright Ivan Prošić 2016.&lt;/p&gt; 
                      &lt;/div&gt;
                      &lt;div class="bottom-footer"&gt;
                          &lt;div class="col-md-12"&gt; 
                              &lt;ul class="footer-nav"&gt;
                                  &lt;li&gt; &lt;a href="https://www.facebook.com/"&gt; Facebook &lt;/a&gt; &lt;/li&gt;
                                  &lt;li&gt; &lt;a href="https://twitter.com/"&gt; Twitter &lt;/a&gt; &lt;/li&gt;
                                  &lt;li&gt; &lt;a href="https://plus.google.com/"&gt; Google+ &lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/font&gt; &lt;/center&gt;
              &lt;/footer&gt;
  
  
  
              &lt;!-- JavaScript fajl --&gt;
              &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
              &lt;!-- Kompresovan JavaScript fajl --&gt;
              &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my CSS, for the footer only:</p>
  
  <pre><code>    .mojFooter{
      background-color: #f8f8f8;
      color: #00a651;
      padding-top: 0px;
      border-top: 1px solid #e7e7e7;
      margin-bottom: 0px;
  }
  
  .bottom-footer{
      border-top: 1px solid #00a651;
      margin-top: 0px;
      padding-top: 7px;
      color: #00a651;
  
  }
  
  .footer-nav li{
      display: inline;
      padding: 0px 40px;
  }
  
  .footer-nav a{
      color: grey;
      text-decoration: none;
  }
  </code></pre>