Search code examples
bootstrap-4asp.net-identity

Bootstrap 4 .nav-item and .nav-link classes


The HTML code created by the ASP.NET Identity scaffolder contains HTML code like this (much simplified) in _ManageNav.cshtml:

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="/something">Profile</a></li>
  <li class=""><a href="/something-else">Password</a></li>
</ul>

Note that this HTML does not contain any reference to either the .nav-item or .nav-link class, as described in the Bootstrap documentation. Moreover, a search of the project files (in particular, the Bootstrap source code included with the project) doesn't turn up any evidence that these classes even exist.

What this all about? I can't find anything obvious with The Google that says that these classes are gone, but the scaffolded code obviously works properly without them.


Solution

  • I think the scaffolding is still based on bootstrap 3? Although bootstrap 4 documentation doesn't state it, nav-stacked class is gone for bootstrap4 as the <nav> now is based on flex-box.

    To make vertical navs, you use flex-column now: https://getbootstrap.com/docs/4.1/components/navs/#vertical