Bootstrap 4 Holy Grail Layout

Question

I must be missing something obvious. Am trying to implement a derivative of the Holy Grail layout in Bootstrap 4.

Instead of Header-->Left Column, Fluid Center, Righ

Answer 1

Make sure the center column is flex-column, and then use flex-grow:1 for the main content. In this example, I only have the sidebars fixed width on larger screens, but you may decide to change this.

http://codeply.com/go/licdodtBCO

CSS

html {
    height: 100%;
}

body {
    min-height: 100vh;
}

/* fixed and fluid only on sm and up */
@media (min-width: 576px) {
    .fixed {
        flex: 0 0 200px;
        min-height: 100vh;
    }
    .col .fluid {
       min-height: 100vh;
    }
}

.flex-grow {
   flex:1;
}

Bootstrap 4 Holy Grail Demo

Bootstrap 4 Fixed-Fluid-Fixed

Note: It's important to note that in the classic "holy grail" layout, the term "fixed" refers to width, and not position as in position:fixed. However, with a few tweaks it's possible to get both fixed width and position. For example, here's an alternate "holy grail" layout with left side bar fixed width and position: https://www.codeply.com/go/s90QZLC0WT