title: Bootstrap navbar doesn't behave as expected
body: <p>I'm trying out the simpliest examples from bootstrap tutorials - page headers, navbar. 
    But while the header works fine, the navbar isn't displayed properly.</p>
  
  <p>I have a <code>project_name</code> folder and inside:</p>
  
  <pre><code>project_name
          bootstrap
                   css: bootstrap.css, bootstrap.min.css, bootstrap-         
                       responsive.css, bootstrap-responsive.min.css
                   img
                   js: bootstrap.js, bootstrap.min.js, jquery.js
  
          index.html
  </code></pre>
  
  <p>So, the bootstrap and jquery seem to be in order and the <code>index.html</code> code seems to be ok too.</p>
  
  <p>index.html: </p>
  
  <pre><code>     &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;Basic Bootstrap Template&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css"      
      href="bootstrap/css/bootstrap.min.css"&gt;
     &lt;/head&gt;
      &lt;body&gt;
         &lt;!-- HEADER --&gt;
          &lt;div class="page-header"&gt;
               &lt;h1 align="center"&gt;Some title
               &lt;small&gt;some subtitle&lt;/small&gt;
               &lt;/h1&gt;
           &lt;/div&gt;
           &lt;!-- HAVBAR--&gt;
              &lt;nav class = "navbar navbar-inverse" role ="navigation"&gt;
  
                          &lt;div class="container"&gt;
                                  &lt;a class="navbar-brand" href="#"&gt;NAVBAR&lt;/a&gt;
                          &lt;/div&gt;
  
                          &lt;div class = "navbar-header"&gt;
  
                                  &lt;ul class = "nav navbar-nav"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                          &lt;/div&gt;
              &lt;/nav&gt;
  
  
                  &lt;script src="bootstrap/js/jquery.js"&gt;&lt;/script&gt;
                  &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>It gives:<a href="https://i.stack.imgur.com/3mof9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3mof9.png" alt="this result"></a></p>
  
  <p>I can't figure out what's wrong..</p>
  
  <p>I expect to get the similar result (but different text and inverse colors):
  <a href="https://i.stack.imgur.com/Dt5ce.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dt5ce.png" alt="result from tutorial"></a></p>