title: Bootstrap Navbar not working in Wordpress Theme
body: <p>I am trying to learn to use Bootstrap to create a navbar for a Wordpress theme.  I just want to make my menu and not use Navwalker.  I used a simple Bootstrap example from W3 schools but it did not work.  Here is the desired navbar. </p>
  
  <p>Desired result:</p>
  
  <p><a href="https://i.stack.imgur.com/xLfZa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xLfZa.png" alt="enter image description here"></a></p>
  
  <p>Here I have the same code in my header.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html &lt;?php language_attributes();?&gt;&gt;
     &lt;head&gt;
        &lt;meta charset="&lt;?php bloginfo('charset'); ?&gt;"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
        &lt;meta name="description" content="&lt;?php bloginfo('description'); ?&gt;"&gt;
        &lt;title&gt;&lt;?php bloginfo('name'); ?&gt; |
           &lt;?php is_front_page() ? bloginfo('description') : wp_title(); ?&gt;
        &lt;/title&gt;
        &lt;!-- Bootstrap core CSS --&gt;
        &lt;link href="&lt;?php bloginfo('template_url');?&gt;/css/bootstrap.css" rel="stylesheet"&gt;
        &lt;!-- Custom styles for this template --&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet"&gt;
        &lt;link href="&lt;?php bloginfo('stylesheet_url')?&gt;" rel="stylesheet"&gt;
        &lt;?php wp_head(); ?&gt;  &lt;!-- This adds other information like plugins to the head --&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div class="container"&gt;
        &lt;div class="row"&gt;
        &lt;/div&gt;
        &lt;nav class="navbar navbar-default"&gt;
           &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                 &lt;a class="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
              &lt;/div&gt;
              &lt;ul class="nav navbar-nav"&gt;
                 &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/nav&gt;
        &lt;div class="row"&gt;
           hello world
        &lt;/div&gt;
        &lt;/header&gt;
  </code></pre>
  
  <p>This is how my navbar looks</p>
  
  <p>My result:</p>
  
  <p><a href="https://i.stack.imgur.com/0ziJi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ziJi.png" alt="enter image description here"></a></p>