Bootstrap footer at the bottom of the page
<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>