How to include Bootstrap in ASP.NET Core
Hello friends, I hope you all are doing great. In today's tutorial, we will have a look at How to include & use Bootstrap in ASP.NET Core. It's our 12th tutorial in ASP.NET Core series. As it's ASP.NET Core tutorial so I am not going to explain bootstrap much.
But you must have the basic idea of Bootstrap, its a client side package of CSS libraries, designed by twitter and these days you can't design a responsive site with Bootstrap as it follows symmetry and is too easy to use. So, let's get started with How to include Bootstrap in ASP.NET Core:
How to include Bootstrap in ASP.NET Core
- There are many third party tools ( Bower, NPM, WebPack etc. ) available in Visual Studio for installing client side applications like Bootstrap, JavaScript, Jquery etc.
- But we are going to use builtin tool of Visual Studio called LibMan ( short for Library Manager ), for installing third party packages, we can use both file system & CDN.
- LibMan is a light-weight client side library acquisition tool, which not only downloads the third party libraries but also keep a track in a special file.
- In order to open Library manager, right click on your project's name in Solution Explorer & then Add > Client Side Library and below dialog box will open up:
- You can see in above figure that I have made a search for twitter-bootstrap@4.3.1 in the Library Text Box and LibMan previewed its files.
- After that I have changed the Target Location and its now wwwroot/lib/bootstrap, so my bootstrap files will be placed inside lib folder of wwwroot folder.
- After these settings click the Install button and these bootstrap files will be installed.
- Let's also install jquery using Library manager, as shown in below figure:
- Library Manager has also created LibMan.json file which keeps the record of all the third party packages installation.
- I have placed both bootstrap & jquery in wwwroot > lib folder, as shown in below figure:
- That's how, we can easily install third party client side packages in ASP.NET Core.
- Now, we need to include this Bootstrap file in our Razor Layout View file, as shown in below figure:
- You can simply drag & drop the bootstrap file in this Layout file and the link tag will automatically be generated.
- So, now let's add some bootstrap code in our Info View file to make it look eye caching, as shown in below figure:
- Now run your application and navigate to info page and if everything goes fine then you will get similar results, as shown in below figure:
- Now you can see our page got a much nicer look with bootstrap included.
So, that was all about bootstrap in ASP.NET Core. I hope you have enjoyed today's lecture. In the next tutorial, we will have a look at Tag Helpers in ASP.NET Core. Till then take care & have fun !!!