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 !!!
Syed Zain Nasir

I am Syed Zain Nasir, the founder of <a href=https://www.TheEngineeringProjects.com/>The Engineering Projects</a> (TEP). I am a programmer since 2009 before that I just search things, make small projects and now I am sharing my knowledge through this platform.I also work as a freelancer and did many projects related to programming and electrical circuitry. <a href=https://plus.google.com/+SyedZainNasir/>My Google Profile+</a>

Share
Published by
Syed Zain Nasir