title: Unable to change row height in Bootstrap 4
body: <p><a href="https://i.stack.imgur.com/NLDho.png" rel="nofollow"><img src="https://i.stack.imgur.com/NLDho.png" alt="enter image description here"></a></p>
  
  <p>Background:</p>
  
  <ul>
  <li>Bootstrap 4</li>
  <li>2 rows, 4 columns each</li>
  <li>Each cell contains a visualization using HighCharts</li>
  </ul>
  
  <p>Issue:</p>
  
  <ul>
  <li>The cells all have a fixed height that cannot be modified</li>
  </ul>
  
  <p>Attempts:</p>
  
  <ul>
  <li>Inline <code>height</code> style for row, and individual cell</li>
  <li>External height for row and individual cell</li>
  </ul>
  
  <p>I have the following <code>div</code> within my HTML:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  
      &lt;div class="row"&gt;
          &lt;div id="1" class="col-md-3"&gt;
              1
          &lt;/div&gt;
          &lt;div id="2" class="col-md-3"&gt;
              2
          &lt;/div&gt;
          &lt;div id="3" class="col-md-3"&gt;
              3
          &lt;/div&gt;
          &lt;div id="4" class="col-md-3"&gt;
              4
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div id="5" class="col-md-3"&gt;
              5
          &lt;/div&gt;
          &lt;div id="6" class="col-md-3"&gt;
              6
          &lt;/div&gt;
          &lt;div id="7" class="col-md-3"&gt;
              7
          &lt;/div&gt;
          &lt;div id="8" class="col-md-3"&gt;
              8
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS looks like the following:</p>
  
  <pre><code>body {
      width: 100%;
      margin: 0;
      padding: 0;
  }
  
  #wrap {
      margin:0px;
      padding:15px;
  }
  
  .row {
      height: 300px;
  }
  </code></pre>
  
  <p>The elements are responsive horizontally and display properly with the proper breakpoints. The styles on the row are not having an impact. The pie chart within the "cell" is always a set height. </p>
  
  <p>I thought it may have been the the chart overflowing, but setting a fixed chart in the .js for the chart, makes the chart smaller but keeps the div the same size (elements below are pushed down).</p>