title: A way to use Bootstrap 4 dropdowns to tab between sections
body: <p>I have seen multiple examples of bootstrap 3 where you can use a <code>dropdown</code> to tab between sections. I would rather use bootstrap 4 in my app. I have seen in bootstrap's docs where you can have tab navigation links and when you click on one, that section adds an active class and then removes the active class from a previous section. I tried using that for <code>dropdown</code> links and it DOES add active class to the corresponding section but it does NOT remove the active class from the previous section. Is there something that I am missing? Keep in mind I am not a professional programmer but this is rather a hobby of mine and that I am trying to make a simple app to help me in my field of work. Here is an example of what I am referring to, where it shows the section but does not remove the active class from previous sections, thus making it impossible to go back to prev sections if I need to. Is there a <code>javascript</code> or <code>jquery</code> function that I need to add here to make it possible? Any help would be greatly appreciated.</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;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="container mt-3"&gt;
      &lt;h2&gt;Toggleable Tabs&lt;/h2&gt;
      &lt;br&gt;
      &lt;!-- Nav tabs --&gt;
      &lt;div class="dropdown"&gt;
        &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
       Dropdown button
     &lt;/button&gt;
        &lt;div class="dropdown-menu nav-tabs"&gt;
          &lt;a class="nav-link active" data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#menu1"&gt;Menu 1&lt;/a&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#menu2"&gt;Menu 2&lt;/a&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Tab panes --&gt;
      &lt;div class="tab-content"&gt;
        &lt;div id="home" class="container tab-pane active"&gt;&lt;br&gt;
          &lt;h3&gt;HOME&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="menu1" class="container tab-pane fade"&gt;&lt;br&gt;
          &lt;h3&gt;Menu 1&lt;/h3&gt;
          &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="menu2" class="container tab-pane fade"&gt;&lt;br&gt;
          &lt;h3&gt;Menu 2&lt;/h3&gt;
          &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>