Make bootstrap rows take full height inside a column

Question

I was creating a template using bootstrap rows and I have nested rows inside a column that looks like this:

<div class="col-5">
         <div class="row">
            <div class="col-3 border border-secondary">Truck Number</div>
            <div class="col-4 border border-secondary">Trailer Number</div>
            <div class="col-5 border border-secondary">Seal Number(s)</div>
         </div>
         <div class="row">
            <div class="col-6 border border-secondary">Date:</div>
            <div class="col-6 border border-secondary">Time:</div>
         </div>
         <div class="row">
            <div class="col-6 border border-secondary">Customer Job No.:</div>
            <div class="col-6 border border-secondary">Customer P/O No.:</div>
         </div>
      </div>

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.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class="billOfLadingContainer" id="element-to-print" style="background-color: white;"> <div class="text-center">TEMPLATE MAIN</div> <div class="row"> <div class="col-7 text-center" style="background-color: black;color: white;">SCHOOL</div> <div class="col-5"> <div class="row"> <div class="col-3 border border-secondary">SCHOOL</div> <div class="col-4 border border-secondary">Ta</div> <div class="col-5 border border-secondary">CD</div> </div> </div> <div class="col-4" style="border:1px solid black;"> <div class="row"> <div class="col-6"> <img class="logo" src="img/logo.jpg"> </div> <div class="col-6"> <div>ADDRE1 </div> <div>ADDRE1 SD 287522</div> <div>ADDRE1 SD 287522</div> <div>ADDRE1 SD 287522</div> </div> </div> </div> <div class="col-3"> <div class="row border border-secondary" style="height: 100%;"> <div>Condition</div> <div>Sunday:______________</div> <div>Saturday:______________</div> <div>Monday:______________</div> </div> </div> <div class="col-5"> <div class="row"> <div class="col-3 border border-secondary">Bus Number</div> <div class="col-4 border border-secondary">Bus 2 Number</div> <div class="col-5 border border-secondary">Seal3 Number(s)</div> </div> <div class="row"> <div class="col-6 border border-secondary">Date:</div> <div class="col-6 border border-secondary">Time:</div> </div> <div class="row"> <div class="col-6 border border-secondary">School No.:</div> <div class="col-6 border border-secondary">School P/O No.:</div> </div> <div class="row" style="background:red"> <div class="col-6 border border-secondary">Remove this space</div> </div> </div> </div>

Answer 1

You're columns are most likely the same height (default behavior of bootstrap 4 cols). Use the h-100 class ( height:100% ) to make the inner boxes fill the height in all cols .

<div class="h-100">
       SCHOOL
</div>

And i would suggest you to use table as your structure is so complicated. Tables worked perfect for your scenario.