title: Bootstrap 4 Navbar Example Stuck in Mobile Mode
body: <p>Right now I'm going to through the Bootstrap material and trying to learn how to use their content with a jinja2 file I'm prepping up for a django project. When I tried copy and pasting their example code 
  (specifically this example <a href="http://getbootstrap.com/docs/4.0/components/navbar/" rel="nofollow noreferrer">http://getbootstrap.com/docs/4.0/components/navbar/</a>) 
  <a href="https://i.stack.imgur.com/uaBY4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaBY4.png" alt="enter image description here"></a>
  into my project it seemed to be working however none of the dropdown elements are responsive and when it enters mobile it wont expand. This was with me using my local css and js files, so I thought I'll use the recommended cdn files on the Jinja website. Now it is functional, but it is stuck in mobile  mode. How should I resolve this problem?</p>
  
  <p>Here's my source:</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;My title&lt;/title&gt;
   &lt;meta character="utf-8" /&gt;
   {%load staticfiles %}
   &lt;!-- &lt;link rel='stylesheet' href="{% static 'css/bootstrap.min.css'%}" type='text/css' media="screen" &gt; --&gt;
   &lt;!-- &lt;script type="text/javascript" src="{% static 'js/bootstrap.min.js'%}"&gt;&lt;/script&gt;  --&gt;
   &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body class="body"&gt;
  
  
   &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="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 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="#"&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;
  
  
   &lt;div&gt;
   {% block content%}
   {% endblock %}
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>