title: Bootstrap 4 - Collapsible Vertical Panels
body: <p>I have seen many Q&amp;A's that deal with horizontal navbars - but can't find a solution for this use case.</p>
  
  <ol>
  <li>I have a <strong>fixed</strong> <code>Left Panel</code>, a <strong>fluid</strong> <code>Center panel</code> and a <strong>fixed</strong> Right Panel.</li>
  <li>The left panel and right panels should have a maximum width and a minimum width. For the sake of this example, let's say:
  <code>minimum-width=200 and maximum-width = 300</code>.</li>
  <li>The center panel should have a minimum width. Let's say:
  <code>minimum-width=500</code> pixels.</li>
  <li>At screen width sizes of <code>left-minimum-width + right-minimum-width + center-minimum-width</code>, all three panels should show. In this example, that's 200+200+500=900. Let's call this '<code>full-width</code>'.</li>
  <li>The left and right panels should be collapsible into a slim column that has a width of a simple icon. (icon-width). Let's say this <code>icon-width=32</code>.</li>
  <li>Between <code>right-minimum-width + center-minimum-width + icon-width</code> (732) and <code>full-width</code>, the left-panel should collapse into a thin vertical bar with an icon in it.
  <strong>On click, the panel should expand 'over' the center container.</strong></li>
  <li>Between <code>center-minimum-width + 2 x icon-width</code> (564), both left and right panels should collapse. <strong>On click, the relevant panel should expand 'over' the center container.</strong></li>
  <li>Below this size, all three panels should stack vertically. As a super cool bonus, the left and right panels, would now be collapsible/expandable horizontal bars.</li>
  </ol>
  
  <p>Here's the basic layout:</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 pl-0 py-3"&gt;Page Panel Left&lt;/div&gt;
    &lt;div class="col fluid bg-faded   py-3"&gt;Page Panel Main Stage&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>
  
  <p>I have poured over the bootstrap 4 collapse and navbar docs and feel that a fair chunk of the above can be done without heavy javascript, but can't quite figure it out. Obviously, the more that can be done with stock  Bootstrap 4 and supplementary css rather than JScript/JQuery, the better.</p>
  
  <p>There are also clues in this article: <a href="https://www.jonathanbriehl.com/2015/12/15/bootstrap-4-vertical-menu/" rel="nofollow noreferrer">Bootstrap 4 Vertical Menu</a>.</p>
  
  <p>Finally, here is a very ugly mock up of what I'm trying to achieve that also shows a collapsible bottom panel:</p>
  
  <p><a href="https://i.stack.imgur.com/hsSIC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hsSIC.jpg" alt="enter image description here"></a></p>