title: How to auto collapse Bootstrap 4 Sidebar for smaller screens?
body: <p>This is my current code, I've managed to hide the sidebar with the collapse button, but I want it to  only collapse for small devices, like the bootstrap navbar does.</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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3 px-1 bg-light" id="sidebar"&gt;
        &lt;div class="py-2 sticky-top flex-grow-1"&gt;
          &lt;div class="nav flex-sm-column"&gt;
            &lt;h2 class="text-center"&gt;PROFILE&lt;/h2&gt;
            &lt;button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse" aria-expanded="true" aria-controls="collapse"&gt;Toggle both elements&lt;/button&gt;
            &lt;div class="collapse navbar-collapse"&gt;
              &lt;a href="" class="nav-link"&gt;LINK&lt;/a&gt;
            &lt;a href="" class="nav-link"&gt;LINK&lt;/a&gt;
            &lt;a href="" class="nav-link"&gt;LINK&lt;/a&gt;
            &lt;/div&gt;
            
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-9" id="main"&gt;
          
            ***PAGE DATA
          
        
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>