title: navbar doesn't show correctly
body: <p>I am currently teaching myself web based languages and I am a bit stuck on my bootstrap/html code. Currently I am running into some trouble with bootstrap. I am trying to make a navbar and I have copied code I found online and pasted on Atom and then ran the local site.</p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;testing&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/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;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;!-- Collapse button --&gt;
        &lt;button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
          aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"&gt;&lt;span class="dark-blue-text"&gt;&lt;i
              class="fas fa-bars fa-1x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/button&gt;
  
        &lt;!-- Collapsible content --&gt;
        &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
  
          &lt;!-- Links --&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="\Users\sealc\.atom\Web Dev\testing\pagethree.html"&gt;page three&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagetwo.html"&gt;Page two&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagefour.html"&gt;Page four&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- Links --&gt;
  
        &lt;/div&gt;
        &lt;!-- Collapsible content --&gt;
  
      &lt;/nav&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>it works when I fiddle with it on codeply, but when I try to run the local site I keep getting this:<a href="https://i.stack.imgur.com/ivAYl.png" rel="nofollow noreferrer">navbar</a></p>
  
  <p>It is probably an easy fix, but I am no expert, I already tried using different links for bootstrap an I copied the template on their website, but nothing changed</p>