Unfortunately, this doesn't make the bootstrap's navbar work properly. The first issue is the site.css overrides a few of the properties related to hover and active states that bootstrap relies on. The second issue I found is that jQuery is not loaded in a Blazor app which means work is needed to make collapsing possible. Third, NavLink doesn't quite work as it should with Bootstrap; NavLink puts the active class on the anchor element while bootstrap uses it on the wrapping list item element within navbars.
It appears we have 3 possible solutions:
Rewrite a lot of CSS to get Bootstrap working and figure out a workaround with jQuery or use JSInterop
Add BlazorStrap to the project to handle bootstrap components
Change the navbar to work similarly to the demo in Blazing Pizza
Which direction would we like to go? If none of these, what would someone recommend?
I've been investigating this issue and I am at a crossroad of decisions.
The first issue with the layout was Blazor uses CSS flex grid for the layout of the app. I edited the following in site.css to correct the layout:
You also need to remove or comment out the following in MainLayout.razor:
This achieves the following result:![image](https://user-images.githubusercontent.com/1839652/62068112-60c9e180-b203-11e9-8278-85781b7b361a.png)
Unfortunately, this doesn't make the bootstrap's navbar work properly. The first issue is the site.css overrides a few of the properties related to hover and active states that bootstrap relies on. The second issue I found is that jQuery is not loaded in a Blazor app which means work is needed to make collapsing possible. Third, NavLink doesn't quite work as it should with Bootstrap; NavLink puts the active class on the anchor element while bootstrap uses it on the wrapping list item element within navbars.
It appears we have 3 possible solutions:
Which direction would we like to go? If none of these, what would someone recommend?