You can get there with Bootstrap, but it's not pretty:
<div class="min-vh-100 d-flex flex-column">
<header class="bg-dark text-light p-1">
<h1>Site Header...</h1>
</header>
<div class="flex-fill bg-success d-flex flex-column">
<div class="container d-flex flex-column flex-fill">
<div class="row flex-fill">
<div class="col-sm bg-light p-1">
<main role="main" class="pb-3">
<p>Body...</p>
</main>
</div>
<div class="col-sm-3 bg-info p-1">
<p>Sidebar...</p>
<p>Sidebar...</p>
<p>Sidebar...</p>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light p-1">
<p>Site footer...</p>
</footer>
</div>
Demo[
^]
It would be simpler to use CSS Grid instead:
<div class="site-grid bg-success">
<header class="bg-dark text-light p-1">
<h1>Site Header...</h1>
</header>
<div class="container">
<main role="main" class="pb-3 bg-light">
<p>Body...</p>
</main>
<div class="bg-info p-1">
<p>Sidebar...</p>
<p>Sidebar...</p>
<p>Sidebar...</p>
</div>
</div>
<footer class="bg-dark text-light p-1">
<p>Site footer...</p>
</footer>
</div>
.site-grid {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
.site-grid > .container {
display: grid;
grid-template-columns: 3fr 1fr;
}
Updated demo[
^]