Getting Bootstrap grid rows to maintain height with h-25

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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top