title: Change height of rows in Bootstrap
body: <p>I have the following body of html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container-fluid h-100 border"&gt;
          &lt;div class="row h-50"&gt;
              &lt;div class="col-sm-12 bg-danger"&gt;Row1&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row h-50"&gt;
              &lt;div class="col-sm-12 bg-primary"&gt;Row2&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want to change the heights of the 2 rows, but always having them both fill the container. As it is they both take up half of the screen. However if I change the heights to say 20 and 80, the rows just revert to 2 tiny rows at the top of the screen. The only other heights that work are 100 and 100 which just makes 2 full screen rows which is not what I want either.</p>
  
  <p>Any ideas??</p>