title: Bootstrap 4 Footer is not placed at the bottom
body: <p>I would like to create a simple main page with a footer section using <code>bootstrap-4</code>. In this example I have a main section and a footer section, which in the code is below the main section and also is styed with <code>bottom: 0;</code> but strangely in browser view or mobile view it is in the middle of the screen.</p>
  
  <p><a href="https://jsfiddle.net/saitam/4vcaz7td/30/" rel="nofollow noreferrer">JSFiddle Example</a></p>
  
  <p>HTML:
      
        </p>
  
  <pre><code>    &lt;div class="row"&gt;
  
        &lt;div class="col-xs-12 col-md-6 mt-100"&gt;
          &lt;h1 class="mb-4"&gt;Some Text&lt;/h1&gt;
          &lt;p style="text-align:justify;" class="lead"&gt;
            Some text some text Some text some textSome text some textSome text 
            some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
          &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="col-xs-12 col-md-6 mt-100"&gt;
          &lt;div class="text-center"&gt;
            &lt;p&gt;
            Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
    &lt;footer class="page-footer"&gt;
      &lt;p class="text-center"&gt;THIS IS THE FOOTER&lt;/p&gt;
    &lt;/footer&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,
  body {
    min-height: 100%;
    height: 100%;
  }
  
  .mt-100 {
    margin-top: 100px;
  }
  
  .main-image {
    width: 100%;
    height: 100vh;
    background-image: url("http://afreshstartmovingco.com/wp-content/uploads/2019/01/hd-wallpapers-1920x1080-nature-1-1568x882.jpg");
    background-size: cover;
    background-position: 0% 100%;
  }
  
  .page-footer {
    background-color: #343a40;
    color: white;
    padding: 30px 30px 30px 30px;
    position: relative;
    bottom: 0;
    width: 100%;
  }
  </code></pre>