How To Upgrade Bootstrap in ASP.NET Core Web Applications - Blazor, MVC, Razor Pages, etc.

All ASP.NET Core web apps come with Bootstrap 5 built-in. However, it is not set up to upgrade using npm or NuGet. So let's look at how to upgrade to the latest Bootstrap 5 version in MVC, Razor Pages, Blazor Server, and Blazor WebAssembly. We will even look at how to fix an upgrade issue.
Full Training Courses: IAmTimCorey.com
Mailing List: signup.iamtimcorey.com/

[@UweGrimm]

Thanks a lot for all your videos and help.

[@IAmTimCorey]

You are welcome!

[@joannagechanfon4770]

I love all your lesson, you are the best teacher ever ❤

[@IAmTimCorey]

I am glad it was helpful.

[@karwenzman]

Thanks! I am learning so much! Newbies like me: if you dont see any effect after implementing these changes try to clear the browser's cache (Strg+F5); that did help me on my Wasm project (17:00).

[@IAmTimCorey]

Thanks for sharing!

[@emreibrahim8504]

Thank you alot Tim!

[@IAmTimCorey]

You are welcome.

[@starkillermx]

Thanks for your video!. How to fix the navbar problem to switch to dark mode? many thanks!

[@kvelez]

Thanks, you should cover those topics for the projects now available in .NET8 and also .NET9

[@IAmTimCorey]

.NET 9 isn't out yet and won't be until November 2024. Until then, there will be a lot of changes to how things work, so showing it off early won't be helpful. The principles here apply to the new Blazor Web App project type. The other project types are the same in .NET 8.

[@kvelez]

@@IAmTimCorey I comprehend, thanks for the clarification. Then still excited for .NET9 and when your courses arrive. Blessings.

[@jessedv5915]

Hey i'm learning about Libman and was woundering why you didn't update the versions that was as its also pretty easy, It would be nice to get a video to see if those changes will also be needed

[@IAmTimCorey]

I've stayed away from LibMan here for a couple of reasons. First, we don't need to add another dependency (even if it is a build-time dependency) to handle one CDN link. Second, I'm wary of starting to depend on LibMan. It is a Microsoft-specific thing that is trying to work in the CSS/JavaScript space. I don't trust that it will stick around and I don't want to depend on it when I have projects outside of the .NET space.

[@alsa91]

Thx Tim, will u make a .Net maui course anytime soon? 😊

[@IAmTimCorey]

I’ve been waiting until after .NET 8, since that will stabilize a lot of MAUI.

[@usmanfarooq3071]

If we have many pages in our website and we have used bootstrap everywhere. And bootstrap plans to change the many of its class names then what will happen? Is there a way to handle such kind of broad change?

[@IAmTimCorey]

Broad, breaking changes don't typically happen with minor versions of any package. This is true for Bootstrap as well. They keep the big breaking changes for the major version updates. So updating inside of Bootstrap 5 should be mostly fine, just small little tweaks. However, you will need to do more work to upgrade to Bootstrap 6 (probably). In that case, you need to evaluate how much work it is and if it is worth it. You don't have to upgrade. If there are major breaking changes for you, you might stay on the older version.

[@317Miss]

I'm surprised there's not a tool in visual studio that will automatically replace the files, similar to the package manager (where bootstrap can also be found).

[@IAmTimCorey]

There is. You can use npm inside of Visual Studio. I’m not a big fan, because of everything else it adds though. Also, you need to be careful of automatic updates to dependencies.

[@Sysshad]

Thanks Tim, good video Do you have a tutorial also for .NET Core 8 and default Blazor Web App. Seems tricky Any reason you dont att it as a Nuget ? i thought that was the best way to keep things up to date

[@IAmTimCorey]

How to upgrade Bootstrap in the new Blazor Web App? It will be the same mechanism. As for why I don't use NuGet, it is because that's not the web standard way of getting web dependencies. Plus, I can use a CDN, which means that the user has to download less from me and less in general if they already have a cached version (which is likely).

[@Sysshad]

@@IAmTimCorey thanks for reply. Good points

[@amdamd-od3hw]

i am in a pickle i try to upgrade bootstrap to the get bootstrap 5.3.3 in my blazor web app server side rendering but when i test the accordion component the expanding and deflating of items doesnt work. help?

[@IAmTimCorey]

If you are switching from version 4.x or below, you might want to go back. Upgrading major versions is hard if you aren’t prepared for the work. In general, though, go to Bootstrap’s site and compare how they do the accordion compared to how you are doing it. It may be that they changed the class names or how the structure is laid out.

[@dmitrybelov5703]

Yet another theme - using client library manager to setup bootstrap in local dirs.

[@IAmTimCorey]

Yeah, you could, but I'm not a fan. Why add all of that overhead to self-host a file that you could serve faster from a CDN? Plus, why deal with the client library manager if you don't already have to? CDNs allow the users to use a cached version of Bootstrap if they have visited any other site that also used that CDN version, not just my site. That's not true if you self-host.

[@SWWTech.]

Can you do a video on signalr authentication to a blazor server. Preferably using a Maui app.

[@IAmTimCorey]

Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/

[@FcoGalaz]

how would you do this in VSCode?

[@IAmTimCorey]

The code doesn't change from Visual Studio to VS Code, so what is it that is causing you issues?

[@piotr6078]

What about replacing css and js files in our catalogs, huh?

[@IAmTimCorey]

I'm not sure what you are asking.

[@OnufrievS]

So a 24 minute video on how to copy two links and lose all the ability to edit the bootstrap.css in any way that makes sense.... this feels like it pretty much defeats the point of updating bootstrap at all

[@IAmTimCorey]

First, the Bootstrap file in the template is not one that can be modified either (it is the minified css version). Second, in general you don't want to modify the Bootstrap file. You want to override it with your own CSS. That way, you can upgrade the Bootstrap file (minor and patch versions) without breaking your changes. That's how Bootstrap and similar are designed to be used. If you really want to "modify" Bootstrap, you will want to install the SCSS files and then rebuild the resulting CSS file to include the custom SCSS files you added that override the base files provided by Bootstrap. That's a more involved process and one that only needs to be done by someone VERY familiar with SCSS and CSS (someone who didn't need this video). One of the reason why you want to avoid updating the Bootstrap file is because doing so negates one of the benefits of using a standard file, which is one a user downloads Bootstrap once, they don't have to download it again for another site that uses it. That can be a significant performance increase for your users. Using a non-standard file means that your users will always have to download your file the first time they hit your site (and every time you update that file). Further, you can use a CDN to provide that standard Bootstrap file, further ensuring that your users can gain the benefit of caching and offloading the work of downloading that file to the CDN instead of your server. Finally, the CDN also gzips the file to ensure that the file is the smallest possible when transmitting it to the user. This is what we did in this video.

[@davidardo4466]

How i can subscription ??

[@IAmTimCorey]

If you are asking about subscribing to my paid content, you can subscribe to the All Access Pass: www.iamtimcorey.com/allaccesspass/ Note that the monthly version only opens up a few times per year (usually 3 times). The good news is that the monthly version is going to open up on Monday for one week only.