<div class="bootstrap container-fluid">
<header>Header</header>
<section class="row">
<aside class="column sidebar-left">whatever left</aside>
<article id="main-section" class="column">Main</article>
<aside class="column sidebar-right">whatever right</aside>
</section>
<footer>Footer</footer>
</div>.bootstrap {
min-height: 100vh;
}
header, footer {
min-height: 50px;
min-width: 100vw;
}
section {
display: flex;
min-height: calc(100vh - 100px);
min-width: 100vw;
margin: 1em 0;
}
aside {
width: 100px;
}
article {
background-color: #f8cecc;
margin: 0 1em;
flex-grow: 1;
}
header {
background-color: #ffe6cc;
}
.sidebar-left {
background-color: #e1d5e7;
}
.sidebar-right {
background-color: #dae8fc;
}
footer {
background-color: #d5e7d4;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.