title: bootstrap style issue in .net c#
body: <p>I've been trying to use a design in bootstrap in .net c# but with no luck.
  When i run this in brackets (the program i used to write the HTML) without any of the razor it works perfectly, but when i run this in Visual Studio I looks all kinds of weird. I think it has something to do with the Bootstrap css not being properly called. But i'm not sure. Anyone here knows what is wrong with this?
  Thanks in advance!!
  The code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Lekker Lokaal&lt;/title&gt;
  
      &lt;environment include="Development"&gt;
          &lt;link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /&gt;
          &lt;link rel="stylesheet" href="~/css/site.css" /&gt;
      &lt;/environment&gt;
      &lt;environment exclude="Development"&gt;
          &lt;link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
                asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /&gt;
          &lt;link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /&gt;
      &lt;/environment&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar fixed-top navbar-expand-md navbar-light rood"&gt;
          &lt;a class="navbar-brand" rel="home" href="#" title="lekker lokaal"&gt;
              &lt;img style="max-width:150px; margin-top: -7px;" src="images/LogoWit.png"&gt;
          &lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
  
  
          &lt;div class="collapse navbar-collapse w-100 flex-md-column" id="navbarCollapse"&gt;
              &lt;form class="form-group-lg"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control border-dark input-lg" placeholder="Search"&gt;
                      &lt;div class="input-group-append"&gt;
                          &lt;button class="btn btn-outline-secondary" type="button"&gt;&lt;i class="fa fa-search" style="color:white"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
              &lt;ul class="navbar-nav mr-auto mb-2 mb-md-0"&gt;
                  &lt;li class="nav-item dropdown"&gt;
                      &lt;a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Categorieën&lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item dropdown"&gt;
                      &lt;a class="nav-link dropdown-toggle text-white" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Gelegenheden&lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link py-1 text-white" href="#"&gt;Aanbiedingen&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link py-1 text-white" href="#"&gt;Over Ons&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;&lt;i class="fa fa-shopping-cart" style="color:white"&gt;&lt;/i&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;i class="fa fa-shopping-cart" style="color:white"&gt;&lt;/i&gt;
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer class="py-5 rood"&gt;
              &lt;div class="container"&gt;
                  &lt;p class="m-0 text-center text-white"&gt;Copyright &amp;copy; Lekker Lokaal 2018&lt;/p&gt;
              &lt;/div&gt;
              &lt;!-- /.container --&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      &lt;environment include="Development"&gt;
          &lt;script src="~/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="~/lib/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/site.js" asp-append-version="true"&gt;&lt;/script&gt;
      &lt;/environment&gt;
      &lt;environment exclude="Development"&gt;
          &lt;script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                  asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                  asp-fallback-test="window.jQuery"
                  crossorigin="anonymous"
                  integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk"&gt;
          &lt;/script&gt;
          &lt;script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                  asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                  asp-fallback-test="window.jQuery &amp;&amp; window.jQuery.fn &amp;&amp; window.jQuery.fn.modal"
                  crossorigin="anonymous"
                  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"&gt;
          &lt;/script&gt;
          &lt;script src="~/js/site.min.js" asp-append-version="true"&gt;&lt;/script&gt;
      &lt;/environment&gt;
  
      @RenderSection("Scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/hnZnu.png" rel="nofollow noreferrer">How it looks in Brackets and is supposed to look</a>
  <a href="https://i.stack.imgur.com/0tx8h.png" rel="nofollow noreferrer">How it looks like is visual studio</a></p>