title: ASP.NET Bootstrap Navigation Bar Styling
body: <p>This is a very simple question. I have seen this example of a navigation bar and I would like to do something similar <a href="https://getbootstrap.com/docs/4.1/examples/pricing/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.1/examples/pricing/</a>. </p>
  
  <p>When I copy the code </p>
  
  <pre><code>&lt;div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"&gt;
    &lt;h5 class="my-0 mr-md-auto font-weight-normal"&gt;Company name&lt;/h5&gt;
    &lt;nav class="my-2 my-md-0 mr-md-3"&gt;
      &lt;a class="p-2 text-dark" href="#"&gt;Features&lt;/a&gt;
      &lt;a class="p-2 text-dark" href="#"&gt;Enterprise&lt;/a&gt;
      &lt;a class="p-2 text-dark" href="#"&gt;Support&lt;/a&gt;
      &lt;a class="p-2 text-dark" href="#"&gt;Pricing&lt;/a&gt;
    &lt;/nav&gt;
    &lt;a class="btn btn-outline-primary" href="#"&gt;Sign up&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To my <code>_layout.cshtml</code> file to get </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;@ViewBag.Title - My ASP.NET Application&lt;/title&gt;
  
      &lt;environment names="Development"&gt;
          @Styles.Render("~/Content/css")
          @Scripts.Render("~/bundles/modernizr")
      &lt;/environment&gt;
      &lt;environment names="Staging,Production"&gt;
          &lt;link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/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;div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"&gt;
          &lt;h5 class="my-0 mr-md-auto font-weight-normal"&gt;Company name&lt;/h5&gt;
          &lt;nav class="my-2 my-md-0 mr-md-3"&gt;
              &lt;a class="p-2 text-dark" href="#"&gt;Features&lt;/a&gt;
              &lt;a class="p-2 text-dark" href="#"&gt;Enterprise&lt;/a&gt;
              &lt;a class="p-2 text-dark" href="#"&gt;Support&lt;/a&gt;
              &lt;a class="p-2 text-dark" href="#"&gt;Pricing&lt;/a&gt;
          &lt;/nav&gt;
          &lt;a class="btn btn-outline-primary" href="#"&gt;Sign up&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This does not render like the example. Why?</p>