title: Default navbar from bootstrap's website not looking the same
body: <p>I'm using the exact example code from Bootstrap's website, but my navbar does not look the same. The collapsed menu starts there from the start, is on the left, and all items are inside it.</p>
  
  <p>Along with the code I have imported all bootstrap files through their recommended CDNs. Here is my full code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;!-- HTML File Title --&gt;
  &lt;title&gt;StackOverflow Copy&lt;/title&gt;
  
  &lt;!-- CSS CDNs --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" type="text/css" href="Testing.css"&gt;
  
  &lt;!-- JQuery &amp; Javascript CDNs --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Testing.js"&gt;&lt;/script&gt;
  
  &lt;!-- Extra Add-Ons: --&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;!-- Main HTML --&gt;
  &lt;div class="container"&gt;
  
      &lt;!-- Navbar --&gt;
      &lt;nav class="navbar navbar-toggleable-md navbar-light bg-faded"&gt;
          &lt;button class="navbar-toggler navbar-toggler-right" 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;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&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"&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="text" placeholder="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;!-- Main Body --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Can anyone tell me why it doesn't look like it should and looks on the <a href="https://v4-alpha.getbootstrap.com/components/navbar/#supported-content" rel="nofollow noreferrer">website</a>?</p>