How do I set table row heights in Bootstrap? - html

Question

I have tried to create a layout using Bootstrap, however I am unable to change the height of my rows. For example, I want the first row height to be 25%, the second 50% and the last 25%. How can I do that?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
<div class="row h-25">
<div class="col-12">
<h1>test</h1>
</div>
</div>
<div class="row h-50">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
<div class="row h-25">
<div class="col-10"></div>
<div class="col-2"></div>
</div>
</div>

Answer 1

You need to specify height: 100%; for html,body and the container-fluid
html, body {
height: 100%;
}
.row {
border: thin solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container-fluid h-100">
<div class="row h-25">
<div class="col-12">
<h1>test</h1>
</div>
</div>
<div class="row h-50">
<div class="col-4">height</div>
<div class="col-8">50</div>
</div>
<div class="row h-25">
<div class="col-10">height</div>
<div class="col-2">25</div>
</div>
</div>

Answer 2

The important thing is that your divs must be wrapped inside something else which has a defined height. Otherwise the percentages are meaningless - 25% of what, exactly?
Demo:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div style="height: 100px;">
<div class="h-25" style="background-color: yellow">Height 25%</div>
<div class="h-50" style="background-color: red">Height 50%</div>
<div class="h-25" style="background-color: green">Height 25%</div>
</div>
See also https://getbootstrap.com/docs/4.0/utilities/sizing/