title: Bootstrap 4 Holy Grail Layout
body: <p>I must be missing something obvious. Am trying to implement a derivative of the Holy Grail layout in Bootstrap 4.</p>
  
  <p>Instead of Header-->Left Column, Fluid Center, Right Column--> Footer, I wish to have my header and footer inside the Fluid Center Column. Obviously, with the header at the top, the footer at the bottom and fluid content in the center. And all columns the same height.</p>
  
  <pre><code>-----------------------------------------------------
  |          |       Header              |            |
  |          |---------------------------|            |
  |  LEFT    |                           |  RIGHT     |
  |  PANEL   |       MAIN CONTENT        |  PANEL     |
  |          |                           |            |
  |          |                           |            |
  |          |---------------------------|            |
  |          |       Footer              |            |
  -----------------------------------------------------
  </code></pre>
  
  <p>The bones of the code are shown below. Where I am struggling is getting the header and footer to correctly show in the fluid, center column. I sense the answer lies in FlexBox, but just can't wrap my head around how to do it!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container-fluid h-100" id="root"&gt;
    &lt;div class="row h-100"&gt;
      &lt;div class="col-md-3 fixed py-3"&gt;Page Panel Left&lt;/div&gt;
      &lt;div class="col fluid py-3"&gt;Page Panel Main Stage
  
        &lt;div class="bg-warning" style="height:8rem;"&gt;I am a header with a fixed height.&lt;/div&gt;
        &lt;div class=""&gt;I am the content, I should be fluid and stretch to the bottom.&lt;/div&gt;
        &lt;div class="bg-warning" style="height:8rem;"&gt;I am the footer with a fixed height&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="col-md-3 fixed  py-3"&gt;Page Panel Right
        &lt;div&gt;
          &lt;br&gt;
          &lt;p&gt;Nullam congue, dui luctus aliquam maximus, erat magna posuere purus, posuere elementum urna nisi vitae dolor. Integer tristique non velit ut suscipit. Vestibulum quam eros, blandit dapibus iaculis nec, volutpat vel purus. Quisque commodo euismod
            ipsum, quis pulvinar augue. Cras non fermentum velit. Proin tincidunt lectus diam, at ornare augue interdum eget. Vivamus porttitor iaculis urna in porttitor. Maecenas auctor ac augue convallis eleifend. Praesent lacus odio, placerat sed felis
            ac, vulputate auctor quam. Cras in nulla eu libero cursus cursus ut a enim. Praesent varius viverra maximus. Morbi accumsan, orci quis semper tempus, leo ipsum efficitur ipsum, eu fermentum ipsum est ac nibh. Ut ut venenatis eros. Duis neque
            nulla, malesuada non ultrices non, laoreet nec enim. Mauris congue, ipsum non ultrices congue, leo eros tristique urna, bibendum accumsan ligula sem in justo.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>