title: Make bootstrap rows take full height inside a column
body: <p>I was creating a template using bootstrap rows and I have nested rows inside a column that looks like this:</p>
  
  <pre><code>&lt;div class="col-5"&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-3 border border-secondary"&gt;Truck Number&lt;/div&gt;
              &lt;div class="col-4 border border-secondary"&gt;Trailer Number&lt;/div&gt;
              &lt;div class="col-5 border border-secondary"&gt;Seal Number(s)&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-6 border border-secondary"&gt;Date:&lt;/div&gt;
              &lt;div class="col-6 border border-secondary"&gt;Time:&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-6 border border-secondary"&gt;Customer Job No.:&lt;/div&gt;
              &lt;div class="col-6 border border-secondary"&gt;Customer P/O No.:&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I want the rows to stretch to take full height of the column. I tried to make the parent column display flex which makes the rows take the full height of the column but all of the rows appear in the same line which is not what I want. Please run my code snippet, in which I have highlighted the problem area in red.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
  
  &lt;div class="billOfLadingContainer" id="element-to-print" style="background-color: white;"&gt;
     &lt;div class="text-center"&gt;TEMPLATE MAIN&lt;/div&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-7 text-center" style="background-color: black;color: white;"&gt;SCHOOL&lt;/div&gt;
        &lt;div class="col-5"&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-3 border border-secondary"&gt;SCHOOL&lt;/div&gt;
              &lt;div class="col-4 border border-secondary"&gt;Ta&lt;/div&gt;
              &lt;div class="col-5 border border-secondary"&gt;CD&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-4" style="border:1px solid black;"&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-6"&gt;
                 &lt;img class="logo" src="img/logo.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="col-6"&gt;
                 &lt;div&gt;ADDRE1 &lt;/div&gt;
                 &lt;div&gt;ADDRE1 SD   287522&lt;/div&gt;
                 &lt;div&gt;ADDRE1 SD   287522&lt;/div&gt;
                 &lt;div&gt;ADDRE1 SD   287522&lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-3"&gt;
           &lt;div class="row border border-secondary" style="height: 100%;"&gt;
              &lt;div&gt;Condition&lt;/div&gt;
              &lt;div&gt;Sunday:______________&lt;/div&gt;
              &lt;div&gt;Saturday:______________&lt;/div&gt;
              &lt;div&gt;Monday:______________&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-5"&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-3 border border-secondary"&gt;Bus Number&lt;/div&gt;
              &lt;div class="col-4 border border-secondary"&gt;Bus 2 Number&lt;/div&gt;
              &lt;div class="col-5 border border-secondary"&gt;Seal3 Number(s)&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-6 border border-secondary"&gt;Date:&lt;/div&gt;
              &lt;div class="col-6 border border-secondary"&gt;Time:&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row"&gt;
              &lt;div class="col-6 border border-secondary"&gt;School No.:&lt;/div&gt;
              &lt;div class="col-6 border border-secondary"&gt;School P/O No.:&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="row" style="background:red"&gt;
              &lt;div class="col-6 border border-secondary"&gt;Remove this space&lt;/div&gt;
              
      
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>