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

<div class="container-fluid h-100">
    <div class="row h-100">
        <!-- left sidebar -->
        <div class="col-md-2 fixed">

        </div>
        <!-- center content -->
        <div class="col fluid d-flex flex-column">
            <nav id="topNav" class="navbar"> 
            </nav>

            <!-- main content -->
            <div class="row flex-grow">

            </div>

            <footer class="navbar navbar-toggleable-xl navbar-faded navbar-light">
            </footer>

        </div>
        <!-- right sidebar -->
        <div class="col-md-2 fixed">

        </div>
    </div>
</div>

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