title: Bootstrap Navbar shows in very weird form
body: <p>I run Ruby on Rails 5 and i use bootstrap gem. The issue i am having is that 
  when i put the html in one of my partials i have very weird looking 'nav-bar'.</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
      &lt;title&gt;App&lt;/title&gt;
      &lt;link rel="stylesheet" media="all" href="/assets/application.self-09a09de7df140e59268bd2c94d4ba54f4e8477100ad6ca7894899b63e99bf8c7.css?body=1" data-turbolinks-track="reload"&gt;
      &lt;script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/tether/tether.self-49a614f96d3d9b228d4f800376a8db0a8315c1f10eb759f66a528112980505de.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/tether.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap.self-4e71bfbf6aff83432bb0f204b1cfa3beaf9d05f0d2acf9ec752924a628245be1.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/util.self-ee646345d4a58a58a1c5f97a3def830f24884ebd628cedc00c5cc9bb748f8dcf.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/alert.self-8ec79d32a4387947ba9c697a802d190e85eaabd2d7868e188ceb32bfaff27090.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/button.self-11f2f59490a5ed1ee00730174836d887cf01ddd797cf2b080e7d9dd1f988faa3.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/carousel.self-a1068285d9397c8a3fe8911b395c0ca7eaa7d98460f68a32896dbdea5904f8ae.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/collapse.self-d36e6561deb41e4e98a568aa5be6b3d14a6d4d604d6923d3732ed8d97d734854.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/dropdown.self-9001a6392843799bd3f8fefa8f2b90bc2ea9e0a70cb5148039787b50b18abc51.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/modal.self-86f0500b4628eba403a8e8a2c31a642d399d7efebb27ccc40f03b0f98f458461.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/scrollspy.self-bc2becbc0f4b31f6fabf6aa80923e509fa9a0fb55165dac75333164564d619b2.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/tab.self-8c546e0109ea36cfbe17faff530986e24eb7043bd1237c64bcb8257f24b0285c.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/tooltip.self-35e74be099c220a4b49c8a825b32613a19641d8b4538a78e819a8b9a75de2b40.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/popover.self-23ed39658a0cf53b747d72cc537e52bc9fc33b3d8eab3872d38186e3631b519c.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/jquery.min.self-ad66c584c2469d2bb527ba7aef5893549f1554ccc8ab3ccb43bd09ce8c3bf7a1.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/action_cable.self-1641ec3e8ea24ed63601e86efcca7f9266e09f390e82199d56aa7e4bd50e1aa9.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/application.self-4d37d7bcf4b0b32507438063ae47ba88dd0178863f7c7a2c7125b221eefea772.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;nav class="navbar navbar-default navigation-clean"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;&lt;a class="navbar-brand navbar-link" href="#"&gt;Company Name&lt;/a&gt;
        &lt;button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1" aria-expanded="false"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse" id="navcol-1" aria-expanded="false"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="active" role="presentation"&gt;&lt;a href="#"&gt;First Item&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#"&gt;Second Item&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#"&gt;Third Item&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;First Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Second Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Third Item&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>After that i have a very weird nav-bar it looks like on the picture below.
  <a href="https://i.stack.imgur.com/9SVbH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9SVbH.png" alt="This is nav-bar "></a></p>
  
  <p><a href="https://i.stack.imgur.com/0elXc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0elXc.png" alt="this is nav-bar when clicked "></a></p>
  
  <p>The most important that this nav-bar is inline it looks like this image below
  <a href="https://i.stack.imgur.com/iadv1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iadv1.png" alt="original nav-bar"></a></p>
  
  <p>Thank you for your help.</p>