title: Bootstrap 4 with collapsible sidebar
body: <p>I wish to create a collapsible sidebar that the user can toggle. After much playing, I have achieved it, but <a href="https://codepen.io/Ciwan/pen/JrONrG" rel="noreferrer">right now, it is very ugly</a>. Here's the code:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="col-md-3 collapse show" id="sidebar"&gt;
        &lt;h2&gt;I'm a sidebar&lt;/h2&gt;      
      &lt;/nav&gt;
      &lt;main class="col-md-9"&gt;
        &lt;i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar"&gt;&lt;/i&gt;
        &lt;h2&gt;I'm the main content&lt;/h2&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue with this is, the collapsing is vertical, and then once collapse, the content doesn't go full width!</p>