How to make so that the second col-12 was in full height of the row unit? I mean, I automatically occupied the rest of the height no matter what height the first col-12 .

 html, body { height: 100%; } .min-100 { min-height: 100%; } 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container-fluid min-100 d-flex flex-column"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark flex-shrink-0"> <a class="navbar-brand" href="#"> <!--<img src="../img/logo.png"/>--> LOGO </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/page/pipelines.html">Pipelines</a> </li> </ul> </div> </nav> <div class="row flex-fill align-content-start"> <div class="col-12"> content </div> <div class="col-12"> content </div> </div> </div>

    0