title: Why is my bootstrap navbar button not showing the nav items on mobile?
body: <p>I'm trying to create a bootstrap navbar. I've used the code from <a href="https://getbootstrap.com/docs/4.3/components/navbar/" rel="nofollow noreferrer">this site</a> to implement it. It's mostly working. The nav items are showing, and when I shrink down to a mobile size, the navbar collapses, but when I try to press the button on mobile the menu/nav buttons do not show.</p>
  
  <p>Here is the original code (copied from the page's source code rather than the code displayed on the page):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;div class="navbar-collapse collapse show" id="navbarSupportedContent" style=""&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Dropdown
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"&gt;Disabled&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline my-2 my-lg-0"&gt;
        &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
        &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the compiled html from my page:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Express&lt;/title&gt;
      &lt;link rel="stylesheet" href="/stylesheets/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Tara Bryn&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" 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="navbarNav"&gt;
          &lt;ul class="navbar-nav"&gt;
            &lt;li class="nav-item active"&gt; 
              &lt;a class="nav-link" href="#"&gt;Profile&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Projects&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!--form.form-inline.my-2.my-lg-0input.form-control.mr-sm-2(
            type='search'
            placeholder='Search'
            aria-label='Search'
          )
            button.btn btn-outline-success.my-2.my-sm-9(type='submit') Search--&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="jumbotron jumbotron-fluid" id="hero-jumbotron"&gt;
        &lt;div class="container"&gt;
          &lt;h1 class="display-4"&gt;Welcome!&lt;/h1&gt;
          &lt;p class="lead"&gt;My name is Tara. I am a full stack developer.&lt;/p&gt;
          &lt;hr class="my-4"&gt;
          &lt;a class="btn btn-primary btn-lg" href="#"&gt;Client login&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I don't see any issues with the code. In fact, when I copy and past the source code from the website, it still doesn't work, but it is working on the website, and I'm not sure what I'm doing wrong. I know the bootstrap is working because it's being stylized correctly. I'm using the compiled code download for <a href="https://getbootstrap.com/docs/4.4/getting-started/download/" rel="nofollow noreferrer">version 4.4.1</a> and here are my imports:</p>
  
  <pre class="lang-css prettyprint-override"><code>@import '../bootstrap-4.4.1-dist/css/bootstrap.min.css';
  @import '../bootstrap-4.4.1-dist/css/bootstrap-grid.min.css';
  @import '../bootstrap-4.4.1-dist/css/bootstrap-reboot.min.css';
  </code></pre>