0

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Just a HK developer
  • 680
  • 12
  • 29
  • 2
    No it isn't a bug. Bootstrap 4 uses flexbox by default. Check the docs for a vertical nav: https://getbootstrap.com/docs/4.1/components/navs/#vertical – Klooven Apr 20 '18 at 09:23
  • Great. That is what I am looking for. Looks like Bootstrap 4 demands more. I guess cannot assume nav means horizontal alignment. Could you please write what you have as answer so I can accept it? Thanks. – Just a HK developer Apr 20 '18 at 09:33
  • Think you will need to do a tutorial for bootstrap 4 as it uses a lot of different classes to bootstrap 3 - if you do a tutorial for bootstrap 3 using 4, a lot of the things won't work – Pete Apr 20 '18 at 09:36
  • I suggest checking the migration docs for changes between the versions: https://getbootstrap.com/docs/4.1/migration/ – Klooven Apr 20 '18 at 09:41
  • Wow. I am surprised by all these information. Thanks a ton! As I am totally new to Bootstrap, I think I will do the 'latest and greatest'. Of course, I will keep that migration doc handy. – Just a HK developer Apr 20 '18 at 09:46

1 Answers1

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.

Klooven
  • 3,858
  • 1
  • 23
  • 41