How to Install Bootstrap in ASP.NET Core MVC

Back to: ASP.NET Core Tutorials For Beginners and Professionals

How to Install Bootstrap in ASP.NET Core MVC Application

In this article, I am going to discuss How to Install Bootstrap in ASP.NET Core MVC Application. Please read our previous article, where we discussed the ViewImports in ASP.NET Core MVC Application. As part of this article, I am going to discuss the following pointers.

1. Different Tools to Install Client-Side Packages in ASP.NET Core.
2. What is Library Manager or Libman in ASP.NET Core?
3. How to Check and Upgrade the Version in Visual Studio?
4. How to Install Bootstrap in ASP.NET Core Using Library Manager?
5. What is libman.json file in ASP.NET Core?
6. How to Clean and Restore Client-Side Libraries using Libman in ASP.NET Core?
7. How to uninstall or update a Client-Side Library using libman.json file?

Different Tools to Install Client-Side Packages in ASP.NET Core:

There are many tools available that you can use to install client-side packages such as JQuery and Bootstrap using Visual Studio. Some of the popular tools are as follows/;

1. Bower
2. NPM
3. WebPack, etc.

But here in this article, I am not going to use any of the above tools instead we are going to use Library Manager which is known as Libman to install the client-side packages. In our upcoming article, I will show you how to use Bower, NPM, and WrebPack to install the client-side packages.

What is Library Manager or Libman in ASP.NET Core?

The Library Manager or LinMan is one of the most popular light-weight, client-side library acquisition tool. This tool is basically used to download the client-side libraries and frameworks such as Bootstrap and JQuery from a file system or from a CDN (Content Delivery Network). In order to use Library Manager, you should have Visual Studio 2017 version 15.8 or later.

How to Check and Upgrade the Version in Visual Studio?

In order to check the Visual Studio Version, you need to follow the below steps.

Click on the “Help” menu and then select “About Microsoft Visual Studio” option from the context menu. This will open the “About Microsoft Visual Studio” window which shows the version number of Visual Studio as shown in the below image. On my machine, I have installed 15.9.5.

If you have installed an older version of Visual Studio 2017, then you can easily update it. In order to update the version of visual studio, you need to follow the below steps.

Click on the “Help” menu and then select the “Check for Updates” option from the context menu. The window appears will display the current version as well as the latest version available of visual studio. Then you need to click on the “Update” button as shown in the below image which will update your visual studio 2017 to its latest version.

How to Install Bootstrap in ASP.NET Core Using Library Manager?

You need to follow the below steps to install Bootstrap in ASP.NET Core MVC Application using the Library Manager (Libman).

1. Right-click on the “Project Name” in the Solution Explorer and then select “Add > Client-Side Library” which will open “Add Client-Side Library” window.
2. Leave the default provider as it is which “cdnjs” is in this case. The other providers are filesystem and unpkg.
3. In the “Library” text box, just type “twitter-bootstrap“. You can also get intelligence support once you start typing. Once you select the matching entry, then it tries to install the latest version of bootstrap. However, if you want then you can also type the version manually you want. Here, we are installing the latest version of Bootstrap i.e. (“twitter-bootstrap@4.3.1”).
4. There are two radio buttons to select whether you to include “All library files” or “Choose Specific files“. If you select “All library files” radio button then all the files are going to be downloaded. On the other hand, if you select “Choose Specific files” radio button then you need to check the selected checkboxes as per your requirement. Here I am selecting the “All library files” radio button.
5. In the “Target Location” text box specify the folder location where you want the library files to be installed. By default, the static files are only served from the wwwroot folder. Here, I am going with the default location i.e. “wwwroot/lib/twitter-bootstrap/”.
6. Finally, click on the “Install” button as shown in the image below.

Once it successfully installed, then you will find two things. One is libman.json file and the second one the required bootstrap files. Please have a look at the following image.

What is libman.json file in ASP.NET Core?

The libman.json file is the Library Manager manifest file. You will find the following code in the libman.json file.

As you can see in the above image, we have an entry for the Bootstrap library that we just installed using the Libman. It is also possible to install the client-side libraries like bootstrap and JQuery by editing the above manifest file.

How to clean Client-Side Libraries using Libman in ASP.NET Core?

If you want to clean the library files which are created by using the Library Manager, then you just need to right-click on the libman.json file and then select the “Clean Client-Side Libraries” option from the context menu. Once you click on the “Clean Client-Side Libraries” option then it will delete all the library files from the respective destination folder. The point that you need to keep in mind is, it will only delete the files from the folder but not in the libman.json file.

How to Restore Client-Side Libraries using Libman in ASP.NET Core?

If you want to restore the deleted files, then you just need to right-click on libman.json file and then select the “Restore Client-Side Libraries” option from the context menu. This will again download and installed the required library files into the specified destination folder.

How to uninstall or update a Client-Side Library using libman.json file?

If you want to uninstall or update a client-side library using libman.json file, then you need to follow the below steps.

1. Open the libman.json file 
2. Click on the client-side library which you want to uninstall or update
3. A light bulb icon will appear at the left side
4. Click on the light bulb icon and then you will see the options whether to update or uninstall that specific client-side library as shown in the below image.

Another approach to uninstall a client-side library is to remove the entry in the libman.json file and upon saving the file the respective client-side libraries are uninstalled from the respective folder location.

Another approach to upgrade or downgrade a client-side library is to change the version number directly in libman.json file and upon saving the file the respective client-side library will be updated to the version you modified.

Note: While updating the version number, you will also get the visual studio intelligence as shown in the below image.

In the next article, I am going to discuss how to use Bootstrap in ASP.NET Core MVC Application. Here, in this article, I try to explain How to Install Bootstrap in ASP.NET Core MVC Application.