Departments:
  1. Computer Engineering
  2. Computer Science
Codings:
  1. C#
Softwares:
  1. Microsoft Visual Code
  2. Microsoft Visual Studio
How to include Bootstrap in ASP.NET Core, How to include Bootstrap in ASP NET Core, bootsrap in asp.net core, bootsrap asp 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:
How to include Bootstrap in ASP.NET Core, How to include Bootstrap in ASP NET Core, bootsrap in asp.net core, bootsrap asp core
  • 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:
How to include Bootstrap in ASP.NET Core, How to include Bootstrap in ASP NET Core, bootsrap in asp.net core, bootsrap asp core
  • 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:
How to include Bootstrap in ASP.NET Core, How to include Bootstrap in ASP NET Core, bootsrap in asp.net core, bootsrap asp core
  • 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:
How to include Bootstrap in ASP.NET Core, How to include Bootstrap in ASP NET Core, bootsrap in asp.net core, bootsrap asp core
  • 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:
How to include Bootstrap in ASP.NET Core, How to include Bootstrap in ASP NET Core, bootsrap in asp.net core, bootsrap asp core
  • 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:
How to include Bootstrap in ASP.NET Core, How to include Bootstrap in ASP NET Core, bootsrap in asp.net core, bootsrap asp core
  • 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 !!!