title: Align div to bottom of the page in bootstrap
body: <p>I tried to use methods from stack questions, but nothing works for me, despite project is very simple. </p>
  
  <pre><code>&lt;div class="fluid-container"&gt;
      &lt;div id="app-row" class="row"&gt;
          &lt;div id="app" class="col-xs-5"&gt;
              &lt;div class="top-navbar"&gt;
              Top
              &lt;/div&gt;
              &lt;div class="bottom-navbar"&gt;
              Bottom
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="map-container" class="col-xs-7"&gt;
              &lt;div id="map"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.fluid-container {
      margin: 0 0 0 0 !important;
      padding: 0 0 0 0 !important;
      width: 100%;
  }
  
  .row {
      margin: 0 0 0 0 !important;
      padding: 0 0 0 0 !important;
      width: 100%;
  }
  
  html, body, .fluid-container, #app-row, #map-container {
      height: 100%
  }
  
  #app-row {
      margin: 0 0 0 0 !important;
      padding: 0 0 0 0 !important;
  }
  
  #map-container {
      margin: 0 0 0 0 !important;
      padding: 0 0 0 0 !important;
  }
  
  #map {
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>What I want to achieve:</p>
  
  <p>Bottom is bottom of the page and Top is on the top of the page. </p>