How to use Bootstrap 4 flexbox to fill available content?
Your component is wrapped into a <flex>
element that needs the same flexbox styling to stretch vertically as well, allowing it's content to stretch with it. So adding class="d-flex flex-column flex-grow"
to the <flex>
will work. Here's a working fork of your plunker example.
Update Bootstrap 4.1.0
The flex-grow-1
and flex-fill
classes are included in Bootstrap 4.1.0
Update Bootstrap 4.0.0
Add a flex-grow
class like this:
.flex-grow {
flex: 1 0 auto;
}
Then, the utility classes can be used for the rest of the layout:
<div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
<a class="navbar-brand" href="#">
<h1 class="navbar-brand mb-0">My App</h1>
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">Item 1</a></li>
</ul>
</nav>
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content
<br> another line
<br> And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content 40px height
</div>
</div>
</div>
https://www.codeply.com/go/3ZDkRAghGU
Here's another example with on Bootstrap 4.3.1 that has a navbar, sidebar and footer with scrolling content area: https://www.codeply.com/go/LIaOWljJm8