bootstrap fill vertical space without a scrollbar

Viewed 31

so - I can find many many stack overlow articles on filling vertical space on bootstrap- from using h-100 to flex-grow-1 - but I can't find one that will simply fill a container without giving me a veritcal scrollbar.

Here's what I'm trying:

<html>
<body>
<div class="container-fluid">
   <div class="row">
      <div class="col-sm-4 bg-info" >first column</div>
      <div class="col-sm-8 bg-warning" >second column</div>
   </div>
</div>
</body>
</html>

Is there any purely bootstrap way of making this exactly fill the entire viewport with no scrollbars visible? I can do it in lots of ways by hacking with css, or just by using flex grid directly but I can't figure out any way to do it by just adding bootstrap classes. (the two background styles are just

1 Answers

On the .row you can add these classes vh-100 align-items-stretch

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row vh-100 align-items-stretch">
    <div class="col-sm-4 bg-info">first column</div>
    <div class="col-sm-8 bg-warning">second column</div>
  </div>
</div>

Related