Bootswatch change definition of nav class from block to flex?

Question

I am following a tutorial using .net core, bootstrap and bootswatch. In the tutorial, there is this menu:

<ul class="nav">
    <li><a asp-controller="App" asp-action="Index">Home</a></li>
    <li><a asp-controller="App" asp-action="About">About</a></li>
    <li><a asp-controller="App" asp-action="Contact">Contact</a></li>
    <li><a asp-controller="App" asp-action="Info">Info</a></li>
</ul>

In bower.json, the tutorial adds bootstrap 3.3.5 and bootswatch 3.3.7. When this .net core 2 program runs, the style for nav is:

display: block

In English, the menu appears like a table with 1 column and 4 rows.

As bootstrap and bootswatch 4 are already here, I upgrade them in bower.json to 4.1.0. To my surprise, the stylr for nav is changed to:

display: flex

In English, the menu now appears as 4 columns but only 1 row.

Why does the definition of nav change? Is this a bug?

Answer 1

This isn't a bug. Bootstrap 4 now uses flexbox by default.

As it is a new major version, some things have been changed.

Here's a simple vertical nav (notice the added classes):

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

As you see you don't need a list element anymore. However if you want to use a list, check the docs.

Check the docs for more information.