title: Bootstrap row custom height in percentage
body: <p>I'm developing a little website and I'm facing some troubles.</p>
  
  <p>What I want is to resize a "row" div with a particular height, in percentage.
  I've already searched on SO but nothing was good for me.
  Here is my code:</p>
  
  <pre><code>&lt;body&gt;
    &lt;nav class="navbar navbar-inverse navbar-static-top"&gt;
        ...
    &lt;/nav&gt;
    &lt;!-- END NAVBAR --&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="row row-first"&gt;
            &lt;img class="img img-responsive" src="public/img/bg.jpg" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>class "row-first" for now has no rules so it not take effect.
  I want that "row-first" div is 80% of the viewport's height, but the only way to resize it is by putting some content inside the div so that the div's height follows content height.
  my CSS:</p>
  
  <pre><code>html {
      height: 100%;
  }
  
  body {
      height: 100%;
  }
  
  body {
      font-family: 'Muli', sans-serif;
  }
  
  .container-fluid {
      max-height: 100%;
      padding-left: 0px;
      padding-right: 0px;
  }
  
  .row {
      margin-left: 0px;
      margin-right: 0px;
      height:80%;
  }
  
  .row-first {
  
  }
  </code></pre>