Getting Bootstrap grid rows to maintain height with h-25

Question

I'm trying to get bootstrap to display in grid what I thought was a simple table with fixed height of each row.

To do so, I'm trying to apply h-25 to each row and overflow-auto to outside container. I tried various mixes of those and I can't get it to work the way I imagined - or react to any h-value at all. None of the examples I found explore this specific case, which suggests to me I'm doing something wrong, but I can't see anything weird about my way of doing it or any more straightforward solution.

From documentation it seems like that's something I should be able to do without any custom css: height control, overflow options, text-break, columns and rows are all built in.

Here's a fiddle example

and the same code pasted

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="text-break overflow-auto">
  <div class="row h-25">
    <div class="col">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
  <div class="row h-25">
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
  <div class="row h-25">
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
  <div class="row h-25">
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
    <div class="col">
      aaaaa
    </div>
  </div>
</div>

score 1 · Answer 1 · answered Nov 06 '20 at 17:16

1

h-25 refers to a percentage of an height and I afraid that without giving a value in your template it is not possible to make it work. If you add a height to the first div:

<div class="text-break" style="height:350px">

It works as expected. more info here: sizing Bootstrap4

answered Nov 06 '20 at 17:16

Xtof

415
5
11

It does in fact work with added height in style. Why does h-25 require external div to have explicit height in px while w-25 works just fine without it? – Jakub Królikowski Nov 06 '20 at 17:37

Carol Skelly · Accepted Answer · 2020-11-06T19:47:38.480

Read this

When percentage height is used (height: 25%) that height is based on the height of the parent container. The parent container doesn't have a defined height, so it's basically 25% of what?

If you're expecting the rows to be 25% percent of the viewport height, you can use vh-100 (height: 100vh) on the container. This will give the container a defined height.

https://codeply.com/p/qx3yKkqROv

<div class="text-break vh-100">
    <div class="row h-25 overflow-auto">
        <div class="col"> aaaaa </div>
        <div class="col"> aaaaa </div>
        <div class="col"> aaaaa </div>
        <div class="col"> aaaaa </div>
    </div>
    ... (remaining rows)
</div>

Getting Bootstrap grid rows to maintain height with h-25

2 Answers2