title: Bootstrap 4 container not taking full height when used in React
body: <p>I'm trying to use Bootstrap 4 in React. How can I make the container take up 100% height?</p>
  
  <p>HTML in my React component: </p>
  
  <pre><code>&lt;div className="container h-100"&gt; 
      &lt;div className="row"&gt;
          &lt;div className="col-md-6" /&gt;
          &lt;div className="col-md-6" /&gt;                               
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div className="filler" /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      background-color: green;
      width: 80%;
      height: 100%;
  }
  
  .filler {
      background-color: orange;
      height: 2400px;
  }
  </code></pre>
  
  <p>I would like for container (green portion) to take up 100% height. Currently, it wraps around the content (the navbar, which was created as a separate React component). </p>
  
  <p><a href="https://i.stack.imgur.com/ZYn91.png" rel="nofollow noreferrer">Image</a></p>
  
  <p>I've been able to get containers and divs to take on the 100% height in plain Bootstrap html / css. But when I insert the same code into my React component, the height doesn't end up working. I'm able to set the width to 80% and the height to either px or vw, but I can't seem to set the height to a percentage. I've also tried using flex-container, which didn't solve the issue.</p>
  
  <p>Would appreciate any help! </p>