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 nougat so the version of bootstrap always stays at bootstrap 5.1 which is not the latest version so let's look at how to upgrade to the latest bootstrap 5 version in MVC in Razer pages in Blazer server and in blazer webassembly because it's always a little bit different for each version we'll even look at how to fix an upgrade issue now before you dive in I want to share a few things with you first if you're interested in improving your c-sharp skills be sure to subscribe to this Channel with over 500 c-sharp videos and Counting is the perfect place to learn and grow your skills second if you're looking for more free c-sharp resources head over to iam10corey.com and check out the resources tab you'll find a podcast the c-sharp products page and much more and third if you're ready to dive deeper into a specific c-sharp topic I have a variety of courses that can help you out not only will you receive a world-class education but you'll also help fund my free content so that everyone can have a great education C sharp not just those who can afford it so let's jump right into Visual Studio here I'm using visual studio 2022 Community Edition and we're going to create a new project so let's create first a a web app project now these are all a little different so I want to make sure we show each of these and just touch on them so this is an asp.net core web application which is Razer Pages yes the name is a little weird but we're not see easily so you can see the differences so let's let's call this uh Razer pages is a name and we'll just say the solution is upgrading bootstrap we hit next mrsa.net 7 no authentication yes to https where I keep all the standard settings and hit create now we're not creating the API in this because the API does not use bootstrap it's not a it's not a UI type of web project so we have razor pages and if we were to start this rated Pages just to kind of show off that yes it does start let's launch it make sure it works and we'll see that the uh the default bootstrap 5 theme is here so that's the default Razer Pages look so we have the home we don't have any other pages right now that's it um the Privacy page is just this page right here so that's the razor pages and if we come over here and look at www.root we can see in our CSS we have the site.css and then down here we have in the lib we have bootstrap and distribution and then in here is CSS we look at the different versions We have bootstrap the grid reboot utilities at least bootstrap we see it's version 5.1.0 so that's the current version of bootstrap that it is using is bootstrap 5.1.0 so we want to upgrade this because we're on 5.3 or Beyond in fact if we go over to our browser and say gitbootstrap.com this is bootstrap and it's new to version 5.3 is color mode expanded color palette and a lot more 5.3.1 is the latest version so let's go to the docs always go to docs and docs are awesome for bootstrap they're amazing I do have a full course on bootstrap just in case you want to go deeper into bootstrap but that's not the point of this demo let's go to downloads and here we see yeah it says it's 5.3.1 for the compiled CSS and JavaScript if you come down here to CDN via JS deliver well right here is the CSS including the um the Integrity check and also the cross origin of Thomas we can copy that that is the latest coming from a Content delivery Network which means we don't have to host the bootstrap file we can host it externally in a place that can be cached for multiple different people so 5.3.1 is the latest we are obviously off of that when we use 5.1 it's a clear ways behind so we can come up here and in the Razer Pages the place will look for your starter page the page is kind of your index.html is under Pages shared underscore layout this is where your your root page is and so we can see all the different things that go into the root of your page including note down here the bootstrap JavaScript so we're going to replace that as well for this page so we're up here though we have bootstrap.min.css that's in the lib bootstrap dist folder um there's the um I don't even see the oh yep it's hidden sorry there we go there's the the minified uh version and then there's the the map for it but we're not going to use this we're going to do instead we're going to use it from the uh this the content delivery Network so we're gonna cut this out or remove this and paste in that link we got before and then you need to come back to our web page you know grab let's just grab this um this version right here the the JavaScript that includes the uh popper.js if you haven't seen other videos I have on bootstrap check I encourage you to check them out I have a video on intro bootstrap I believe on this channel that talks more about how the fact that bootstrap is really tiny it's actually pretty performant people often think that they had you know it's blow it or whatever it's really not even with all of this it's a really tiny download come down here we can replace the um the bootstrap bundler and get rid of that and paste in our JavaScript and if we run this web app again it should pop up no problem things should look the same as it did before so looks the same because it is the same but now we're using bootstrap 5.3.1 so that's a pretty simple one but let's keep going I want to show off kind of some changes you have to make in other versions so let's close this out and we're going to add another project we'll add MVC so let's come down here asp.net core web app in parentheses model view controller that's MVC so we'll just say MVC and again leave all the defaults hit create this is very similar let's set this to start a project we run this real quick just to see we have it yep same look and feel so again the way to update this is if you look in the CSS under www root I'm sorry under lib we'll see bootstrap and we have a disk just like in razor pages is a similar concept so you come down here to our views under shared we have the underscore layout.cshtml we can come down here we can get rid of the bootstrap JavaScript we can paste back in the bootstrap JavaScript 44 and let's pull up the bootstrap CSS from here okay we'll copy that come back up here to our CSS and paste that it's all you have to do the other thing is we've now made the load on our server a little lighter so again works the same way I'm not going to boot this note because it's the same thing but let's keep going and we're going to add blazer because this is a bit different so we have first Blazer server app so say Blazer server and again.net7 we hit create and we'll set this as a startup project I do want to start this before we get going because I want you to see there's going to be some changes to happen because the bootstrap change okay so this is this is bootstrap uh 5.1 I believe and you know it looks like we're used to seeing so let's come back over here and if we go under www root we see CSS underneath there is bootstrap and bootstrap.min.css so this is a little different than what we see in Razer pages and MVC and if you come down here to the hosts which is in the pages not the shared underscore host.cshml that's the starting point for your application for Blazer server so if you're looking for where is the index.html or something similar it's the underscore host.cs HTML file so in here if you'll note down the bottom there's only the blazer.server.js JavaScript there is no uh bootstrap JavaScript that's because they didn't really need it and so I said hey let's not put it in if we don't need it therefore they just left it off you might need it you might want it you can add it back in not a problem but right up sorry right here is our bootstrap.min.css let's get rid of that and we'll paste in the bootstrap from the content delivery Network for our CSS by the way the bootstrap version let's just check that out real quick it is still 5.1.0 so even though it looks a little different it's it's treated a little different where it's located is different it's still the same bootstrap 5.1.0 that we have MVC and Razer Pages now let's run this and see what we see because we've upgraded bootstrap and notice there is a bit of a glitch here okay if you don't notice it already that little house icon is really close to the edge of the button in fact it's there in the same with the plus and same with this whatever that is icon um there's a there's a spacing problem here well it turns out if we hit the F12 developer tools and yes let's open Dev tools there we go and I don't want to have it in that mode okay so now what we're going to do is by the way your Dev tools are your friend use them they're awesome one thing I love is this disabled cache in this case whenever I hit refresh it's gonna get the brand new version from the server it's not going to store anything in Cache that's terribly inefficient for normal web browsing it is wonderful for debugging just a little tidbit but come over here to elements and we then use the element selector and select any one of these items here we'll see that this is a nav link and if you come down here on the right hand side you can see it it's a little small I know um so you can zoom in a little bit here make it a little larger we see that the padding is set to a variable that says BS nav link padding Y and Bs nav link padding X just is a cheat sheet because I know where it was in 5.1 this used to say that the um the Patty and the X was one ram in the patterns Y is 0.5 Ram but then they started using variables instead y variables because we could change them as you in our CSS but since we never set that variable it's it's an empty variable around us it doesn't have a starting value unfortunately so not a problem we're going to do is we're going to close this out actually you know what I'm going to close it out I'll pull off a side of the screen because we have hot reload hot reload's awesome let's go over to our CSS so in our CSS which is under www root we can we could delete the bootstrap we're not going to but we could um we're not using anymore go to site.css and because we're changing these variables for the entire page I'm going to do it very top right after this import statement I'm going to say colon root and in the root we're going to change two variables BS nav link padding y and yes let's make this 0.5 Ram and then we're going to say BS nav link not color padding of the X this is where the two different things are fighting the two different like intellisense and also my um GitHub copilot X they're fighting a little bit it's a little frustrating right now they're getting better at it but what I've done here is I've set two variables because bootstrap is looking for these variables and so we're going to set the values for them the padding of the Y should be 0.5 the pen would be actually one because that's what it was before and so we want the same same look and feel so I save that and nothing seems to happen why is that well because we're actually changing variables here what we need to do is do a Reload so even though hot reload normally works for this particular thing we have to restart so I tell the value of hot reload and we have to redo it but notice that now we have a much better spacing like we were used to be for because we changed that variable and again if you're confused on CSS variables or how they work because it's a newer thing in CSS with css3 um that's going to cover in my web development master course we go in depth into how all this works but the basics are this is a variable up here so this is a variable we can assign a value and then we can reference it anywhere we want using the VAR and then passing in this it'll pull that value in which means I can change it in one spot and change it everywhere in my CSS including in bootstraps CSS now the important bit here is make sure bootstrap is first and your CSS is I'm sorry right here your CSS is later because your CSS will override then any settings in this CSS you don't want it flipped around because otherwise bootstrap would override yours and that only would not be good that's the whole point of cascading style sheets is you use the Cascade to your benefit so that's all there is for a fix and now we're good to go so let's go look at Blaze webassembly because it's again a little different so down here Blaze or webassembly press a Blazer wasm which if you don't know wasm stands for web assembly and yes we're going to leave the configure for https and leave everything else unchecked we don't need to Progressive web app we don't need the asp.net core hosted just means it's not create an API um so we're not gonna do that okay so let's um I believe we have everything set we can just come over to our blazeboasm we can set as startup project but you come over to our shared I'm sorry under Pages nope it's a neither spot what's going on here because it was in the shared in most places and then it was in the pages for Blazer server well that's this is where it gets a little confusing under www root we have this right here where we have index.html again yay so we open this up this is where they start over our website is so yes it's a a fourth different place for the fourth different project yes it's a little frustrating but it is what it is based upon different project types so again we have our CSS and again under bootstrap it's still the version 5.1.0 therefore we can cut this out or remove this and paste in our version of bootstrap which is 5.3.1 and again we're not using the uh the Blazer uh or I'm sorry bootstrap JavaScript we are using the Blazer webassembly JavaScript but we're not using bootstrap so that should be it except for the fact that when we run this it's going to look like it's broken again because we don't have those variables let me just load this here there we go it's loading Blazer web of assembly does take a little longer um to load so there you go it's loaded now and no it's cutting off the edges we're gonna fix that so let's pull up our our app.css come up here and say root and you know what I was going to copy and paste this because it's just faster than me typing again hit save we run us again wait for it to load and once it does we'll see that these are aligned again properly so that's a little tweak you have to do in order to get the base template up and running now if you had done more things in bootstrap where there's breaking changes there's not major breaking changes inside of minor versions there's little things but nothing major so you shouldn't have too many problems but I would encourage you to test but it is good to be on on the the major versions or even the minor versions keep it up to date because there are new things that come along for example this is a tiny little example and it's one you have to play with more but what we could do is come back to our index.html is and right here where it says HTML language equals English we could add a data Dash b s Dash theme equals dark and this now bootstrap 5.3 and Beyond we can add Dark theme to our website very easily now just in case you're wondering data Dash that's a actually an HTML standard that allows it to create these attributes for our tags that don't exist in the normal standard so anti-c data Dash that means pretty much anything afterwards it just made up and then we have some kind of system to look for it in this case anything data Dash BS Dash is bootstraps additional attributes for elements in this case the bootstrap element is for theme we can say dark and if we run this it won't be perfect but it's going to apply a dark theme to our website so all of a sudden now our website has a nice Dark theme that purple is still there because we specified color color purple and our link color is is not right for that background but otherwise you know it looks kind of cool um looks a lot better I prefer the Dark theme personally or about needs to be updated but that allows you to switch back and forth and you can actually do media queries in your CSS for dark versus light theme and make your changes to make things look great so that is something you can do with bootstrap again I cover that of course but just a little tweak like that also I want to point something out we're on webassembly and webassembly has been taking a while to load and people often you know pop open the developer tools and say why is webassembly taking a long time to load let's push down the bottom and they come over here at Network and they say disable cache and then they reload the site and it takes forever and it crashes awesome I'm not sure what happened there I had a issue going on but if we look it's transferring 1.4 megabytes worth of information it's taking forever seemingly to load the site it's just a little frustrating what's going on well the issue is actually not necessarily an issue now yes Blazer webassembly sites will take longer to load because they're downloading everything from the server to the client before they start rendering the page however you cannot look at your development load time and expect anything but a slow refresh rate you can't look at your development workload and expect that to be the real size of your site being transferred so this is one megabyte transferred actually uh 1.4 bytes of resources but only one megabyte transfer it's gonna use some gzip and other things to expand things but that's still a lot right well that's because we're in debug mode and debug mode cancels all the caching it pulls from a server every single time instead of doing what webassembly does it's also using the the expanded version of things in order to make debugging easier so this will actually shrink quite a bit and it'll be much much faster once we actually publish not run in release mode once we publish our website so you can't test the speed of a Blazer webassembly web app in development or release mode you have to test it by publishing it so just want to point that out real quick but with that being said that's the way to upgrade bootstrap to boost the latest bootstrap bootstrap 5.3.1 as a tile recording that's how to upgrade that really easily in all the different web application types and as a side bonus kind of shows you where that starting page is for every different type of web app that Microsoft puts out okay I hope that answers some questions if you have questions let me know down the comments if you want to see more about something like this let me know down in the comments or you can go to suggestions.im10core.com and leave a suggestion there and I'll hopefully answer in a future video all right thanks for watching as always I am Tim Corey [Music] thank you [Applause] [Music]

Channel: IAmTimCorey

Views: 16,097

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, .net core, vs2022, .net 6, .net 7, bootstrap 5.3, dark mode, bootstrap 5.3.1, css variables, css 3, html 5

Id: h5KG5MY_-9k

Length: 24min 1sec (1441 seconds)

Published: Mon Aug 07 2023