Ensuring that Bootstrap rows fill the entire height within a column

While working on a template with nested rows and columns in Bootstrap, the layout ended up looking 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>

In order to make the rows stretch to the full height of the column, I attempted to use a flex display on the parent column. However, this caused all the rows to appear in a single line instead of stacked as intended. Please see the highlighted problem area in my code snippet below:

<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>

javascriptcssbootstrap-4

Answer №1

It is likely that your columns have the same height, which is the default behavior of Bootstrap 4 columns. To ensure that the inner boxes fill the height in all columns, use the h-100 class (height:100%).

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

Consider using a table structure as your layout seems quite complex. Tables could work perfectly for your specific scenario.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring how to access properties of objects in javascript

As a novice on this platform, I'm uncertain if the title may be deceiving, but I have a question regarding the following scenario: var someObject ={} someObject.info= { name: "value" }; How can I acce ...

javascriptobject

While developing an exam portal with Angular and Spring Boot, I encountered an issue when trying to incorporate a name field as [name]

Component.html <div class="bootstrap-wrapper" *ngIf="!isSubmit"> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!- ...

javascriptangulartypescript

`When you extend a $resource object, it effectively removes the prototype from the

Here's the current code snippet I'm working with: // Factory angular.factory('Student', function() { var defaults = { StudentId: null }; var Student = function(params) { angular.extend(this, angular.copy(de ...

javascriptangularjsjavascript-objectsangularjs-resource

Enhancing List Numbers with CSS Styling

Is there a way to customize the appearance of numbered lists? I created an ordered list and would like to modify the numbering style To remove the bullets And adjust the color and background ...

htmlcss

Interactive table with Draggable feature supported by Bootstrap Vue

After tirelessly searching for a solution to drag and drop rows on a Bootstrap Vue table, I finally stumbled upon a functional version here: Codepen I attempted to integrate this code into my own table: Template: <b-table v-sortable="sortableOptions ...

javascriptvue.jsdraggablebootstrap-vuebuefy

getting information from a JSON array using AngularJS

Looking to extract all images from the imagePath array in the following JSON. While retrieving a single image works fine, encountering difficulties when trying to fetch the entire imagePath array. Any help with this issue would be greatly appreciated. Than ...

javascripthtmlangularjsjson

An issue occurred during the compilation of an Angular6 project

I am embarking on my first Angular project and may not grasp every detail perfectly. In my search for guidance, I came across the command "ng build --prod" on Google and decided to give it a try. Everything seemed to be going smoothly at first until an err ...

htmlcssangularwebng-build

Achieving Perfect Alignment in Dreamweaver: Crafting a Stylish Header Container

Hello, I am currently working on a Dreamweaver site and have created a CSS style sheet within my template that includes a div tag called #HeaderBox. My goal is to make this box 40% of the screen's size, with specific pixel dimensions if necessary. I a ...

csshtmldreamweavercenter

"Efficient HTML Table Sorting at Your Fingertips

Indeed, the realm of JS/jQuery programs offering this functionality is vast. Currently, I am utilizing . It's quite straightforward: simply include a JS file, assign a few class attributes to your table, and you're good to go. One notable advanta ...

javascriptjqueryperformancesortinghtml-table

Retrieving the data from a Material UI Slider control

I'm encountering an issue with retrieving the value property I assigned to a component. event.target.value is returning undefined. How can I successfully access the value of the component? My goal is for handlePlayersChange() to be able to handle dyn ...

javascriptreactjstypescriptmaterial-ui

How can we update the form builder or form group in Angular 2 when making changes to the existing data in a table? I'm a bit confused on how to implement router

<tr *ngFor="let row of categories "> <td>{{row.categoryName}}</td> <td>{{row.visible}}</td> <td>{{row.instanceNumber}}</td> <td> <a class="btn btn-info btn-fill " [routerLink]="['/con ...

javascriptformsangulartypescriptformbuilder

The HTML file contains the complete version number of Firefox

If you're an expert in HTML, take a look at my expandable start page. I know there's room for improvement, and I'm seeking advice on automatically updating the Firefox browser version number in line 106 of the code snippet below. (Linux Mint ...

javascripthtml

Rapidly generate VueJS templates for quick display

Is there a way, similar to KnockoutJS, to easily render content from a template using an ID? <script type="text/html" id="template-example"><span>Hello world!</span></script> <div data-bind="template: &a ...

javascriptvue.js

What causes the behavior of Node.js to be the way it is?

Check out this code snippet function removePrototype() { var obj = {}; for (var _i = 0, _a = Object.getOwnPropertyNames(obj.__proto__); _i < _a.length; _i++) { var prop = _a[_i]; obj[prop] = undefined; } obj.__proto__ = ...

javascriptnode.js

JavaScript embedded in an HTML document, which in turn is embedded within JavaScript

Is it possible to nest tags within other tags to control the functionality of a download button in a chat bot? Unfortunately, nesting tags is not allowed, so I'm looking for an alternative solution. Below is the complete HTML file I'm working wit ...

javascripthtmlbootstrap-5

Manually adjust rotation in Three.js by clicking

I am looking to initiate an animated rotation of an object by clicking a button. I have a basic understanding that the render function operates as an infinite loop and that adding 0.1 to cylinder.rotation.x continuously rotates the object. My goal is to ...

javascriptthree.jsrotation

There seems to be a glitch in the AJAX code

I am currently working on a project that involves displaying categories and subcategories of products on a webpage. When users click on either a category or a subcategory, AJAX is used to send the selected item to a php script which then generates HTML cod ...

javascriptjqueryajax

Partially translucent electron window

Is there a way in Electron to create a view similar to the finder in macOS, where the sidebar is opaque and the main content is not? https://i.stack.imgur.com/UKXg2.jpg I am aware of how to make an entire window opaque, but I'm unsure if it's p ...

javascriptnode.jselectronwindow

The filtering and sorting features of Ng-table do not seem to be working properly when dealing with grouped data

Currently, I am in the process of learning angular.js and have recently started using the ng-table directive. While I have successfully managed to group my data and display it using ng-table, I seem to be facing issues with sorting and filtering the data. ...

javascriptangularjsngtable

The Nuxt image keeps disappearing every time I navigate to a new page

Whenever I have an image displayed on my Nuxt page and then navigate away from it, the image breaks and I can't figure out why. This is what my code looks like: <img :src="baseUrl + 'storage/'+ front.featured_image" alt="p ...

javascriptlaravelvue.jsnuxt.js