title: Bootstrap 4 collapse sidebar into a navbar dropdown
body: <p>I have a navbar and a sidebar to the left which I want to collapse to the navbar as a dropdown option in smaller screens. This is what it looks like in bigger screens</p>
  
  <p><a href="https://i.stack.imgur.com/gFjFm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gFjFm.png" alt="Full Screen"></a></p>
  
  <p>When the screen size is small, I want something like this to happen</p>
  
  <p><a href="https://i.stack.imgur.com/ybbJV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ybbJV.png" alt="enter image description here"></a></p>
  
  <p>Here are my codes</p>
  
  <p><strong>HTML body</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;!-- Navbar --&gt;
    &lt;nav class="navbar navbar-expand-md navbar-dark bg-dark py-2"&gt;
      &lt;a class="navbar-brand" href="#"&gt;CDR&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Login&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div class="container-fluid flex-grow-1"&gt;
      &lt;div class="row h-100"&gt;
  
        &lt;!-- Sidebar --&gt;
        &lt;!-- Collapse as a navbar dropdown in smaller screens --&gt;
        &lt;div class="col-lg-3 col-sm-4 sidebar"&gt;
          &lt;div class="sidebar-container mt-4 mx-2"&gt;
            &lt;h4 class="text-capitalize py-2"&gt;Subjects&lt;/h4&gt;
            &lt;ul class="nav flex-column subjects"&gt;
              &lt;li class="subject" data-subject="mathematics"&gt;
                &lt;h5 class="subject-title mb-1"&gt;Mathematics&lt;/h5&gt;
                &lt;h6 class="subject-details m-0"&gt;
                  &lt;span class="teacher"&gt;Prof X.&lt;/span&gt; |
                  &lt;span class="room"&gt;Room 113&lt;/span&gt;
                &lt;/h6&gt;
              &lt;/li&gt;
              &lt;li class="subject" data-subject="science"&gt;
                &lt;h5 class="subject-title mb-1"&gt;Science&lt;/h5&gt;
                &lt;h6 class="subject-details m-0"&gt;
                  &lt;span class="teacher"&gt;Prof Y.&lt;/span&gt; |
                  &lt;span class="room"&gt;Room 111&lt;/span&gt;
                &lt;/h6&gt;
              &lt;/li&gt;
              &lt;li class="subject" data-subject="english"&gt;
                &lt;h5 class="subject-title mb-1"&gt;English&lt;/h5&gt;
                &lt;h6 class="subject-details m-0"&gt;
                  &lt;span class="teacher"&gt;Prof Z.&lt;/span&gt; |
                  &lt;span class="room"&gt;Room 130&lt;/span&gt;
                &lt;/h6&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!-- Content --&gt;
        &lt;div class="col-lg-9 col-sm-8 content-container"&gt;
          &lt;div class="row h-100"&gt;
            &lt;div class="col-lg-9 col-md-9 col-sm-12 main-container"&gt;&lt;/div&gt;
            &lt;div class="col-lg-3 col-md-3 d-none d-md-block announcement-container"&gt;uwu&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .sidebar {
    border-right: 1px solid var(--light-grey);
  }
  
  .subjects {
    user-select: none;
  }
  
  .subject {
    padding: 15px;
    cursor: pointer;
    border: 1px solid var(--lighter-grey);
    border-radius: 5px;
    margin-bottom: 5px;
  }
  
  .subject-title {
    font-size: 0.8rem;
    letter-spacing: 2px;
  }
  
  .subject-details {
    text-transform: capitalize;
    color: var(--gray);
    letter-spacing: 2px;
  }
  
  .active {
    font-size: 1rem;
    background-color: var(--lighter-grey);
    border-left: 4px solid var(--gray);
    padding-left: 12px;
  }
  
  .content-container {
    background-color: var(--content-bg-grey);
  }
  </code></pre>
  
  <p>So far as I've searched, I can't find a way to do this just yet. What would be the proper way to do it? Is there a bootstrap setting that will allow for this or do I need to use JS? I'm also using jQuery if this helps any.</p>
  
  <p>Thanks!</p>