title: Bootstrap 4 navbar not collapsing on large screen
body: <p>I am trying to implement a Navbar using Bootstrap 4. Currently, the Navbar correctly collapses when the viewport is shrunk to mobile size. However, when attempting to toggle menu, nothing happens. The jsFiddle example demonstrates this behavior. I have attached the HTML as well.</p>
  <p>Steps I have taken:</p>
  <ul>
  <li>Removing all custom CSS</li>
  <li>Ensuring jQuery link is before Bootstrap JS file</li>
  <li>Script tags in the header and the footer</li>
  <li>Copy and paste exact examples from Bootstrap Docs (and I get the same behavior)</li>
  <li>Ensuring that JS is being used in the Chrome browser</li>
  <li>Validated HTML using WC3 validator</li>
  <li>And of course, read various posts on SO about this issue but none lead to a resolution</li>
  </ul>
  <p>jsFiddle link <a href="https://jsfiddle.net/u7v5jba9/" rel="nofollow noreferrer">https://jsfiddle.net/u7v5jba9/</a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;title&gt;Site title&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css&quot; /&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; /&gt;
  
  &lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg navbar-light&quot;&gt;
  
        &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;
          &lt;i class=&quot;fa fa-globe&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; Brand Name
        &lt;/a&gt;
  
        &lt;button class=&quot;navbar-toggler collapsed&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                  &lt;i class=&quot;fa fa-angle-double-down&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
  
        &lt;div class=&quot;navbar-collapse collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
          &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link &quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link &quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class=&quot;navbar-nav&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link &quot;&gt;Sign In&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link &quot;&gt;Register&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link &quot;&gt;Log Out&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;container&quot;&gt;
      &lt;nav class=&quot;navbar navbar-inverse fixed-bottom text-center&quot;&gt;
        &lt;h6 class=&quot;text-light text-center&quot;&gt;Footer&lt;/h6&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;!-- Scripts --&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>