I am facing an issue with my website built on Bootstrap 4. I am trying to make a layout that utilizes the full height of the screen. I had expected the new "flex" grid system in Bootstrap 4 to facilitate this, but it seems like I might be implementing it incorrectly. Currently, the height of my application only extends to the height of the content within. As shown in this Bootply example, the available area's entire height is not utilized. This is how my code appears:
<div class="container-fluid">
<div class="row" style="border-bottom:1px solid #000;">
<div class="col-12">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><h2>My Name</h2></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="row">
<div class="col-3" style="background-color:#fff;">
<div class="text-center">
<i class="fa fa-users"></i>
<div>Users</div>
</div>
<div class="text-center" style="color:orange;">
<i class="fa fa-files-o"></i>
<div>Files</div>
</div>
<div class="text-center">
<i class="fa fa-cubes"></i>
<div>Containers</div>
</div>
<hr>
<div class="text-center">
<i class="fa fa-comments"></i>
<div>Feedback</div>
</div>
<div class="text-center">
<i class="fa fa-question-circle"></i>
<div>Help</div>
</div>
</div>
<div class="col-9" style="background-color:#eee;">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
</div>
</div>
<div class="col-9" style="background-color:#ddd;">
[main content goes here]
</div>
</div>
</div>
How can I make use of the full height of the screen by correctly implementing the flex grid in Bootstrap 4?
Appreciate your assistance!