title: Bootstrap responsive navbar (left side and right side with form) .NET Core
body: <p>I have this issue with bootstrap navbar whereby I have quite a lot of links and thus it doesn't collapse early enough, thereby resulting in a 2 row navbar. I have links on both the left and right side. How do I go about ensuring it collapses early enough? Thank you!</p>
  
  <p>Edit: Even on bootstrap docs this happens so I'm quite confuse</p>
  
  <p><a href="https://i.stack.imgur.com/h1Ofh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h1Ofh.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/NJlJL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NJlJL.png" alt="enter image description here"></a></p>
  
  <p>This is my current codes:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav mr-auto"&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="" asp-action="" class="nav-link"&gt;XXX&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="" asp-action="" class="nav-link"&gt;XXX&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="" asp-action="" class="nav-link"&gt;XXX&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="" asp-action="" class="nav-link"&gt;XXX&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="" asp-action="" class="nav-link"&gt;XXX&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="" asp-action="" class="nav-link"&gt;XXX&lt;/a&gt;&lt;/li&gt;
  
          &lt;form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })" method="post" id="logoutForm" class="navbar-right"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage" class="nav-link"&gt;Profile&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;button type="submit" class="btn btn-link navbar-btn navbar-link"&gt;Logout&lt;/button&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/form&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>Update 2:
  I suspect it may be due to the way .NET Core handles the data. It's a shared navbar and based on what .NET Core auto generated, this is what I have. As you can see inside the else as an example, so I may not need the full navbar tag. This is causing some issues. Either I get it left and right, but it does not close at the right size(resulting in expanded navbar), or it is all on the left, but the navbar closes on time. </p>
  
  <pre><code>@if (SignInManager.IsSignedIn(User) &amp;&amp; showAll == true)
  {
  //View codes here
  }
  else
  {
      &lt;ul class="nav navbar-nav mr-auto"&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="Home" asp-action="About" class="nav-link"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="" asp-controller="Home" asp-action="Contact" class="nav-link"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="nav-item"&gt;&lt;a asp-area="Identity" asp-page="/Account/Login" class="nav-link"&gt;Login&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  }
  </code></pre>
  
  <p>Update:
  For .NET Core MVC users, just go to Views/Shared/Layout.cshtml and edit the <code>&lt;nav&gt;</code></p>