How to Install Bootstrap Package in ASP.NET Core Application in Visual Studio
Visual Studio has many tools available that you can use to install client-side packages such as JQuery and Bootstrap. Here I will discuss 2 popular ones which are:
1. LibMan (LibraryManager)
How to Install Bootstrap in ASP.NET Core Using LibMan
When you are using Visual Studio 2019 then LibMan is a perfect choice to install Bootstrap Package in your application. Just follow these quick steps:
Step #1: In your ‘Solution Explorer’ window, right click on the Project Name and then select Add > Client-Side Library. It will open ‘Add Client-Side Library’ window.
Step #2: Next, in the Add Client-Side Library window leave the default provider which is “cdnjs” in this case.
Step #3: Type the library name in the Library text box. IntelliSense provides a list of libraries beginning with the provided text. So here just type in twitter-bootstrap, and when the entry shows up, simply select it. It will automatically select the latest version of Bootstrap. However, if you want then you can also type the version manually. Here, I am installing the latest version of Bootstrap i.e. (“[email protected]”).
Step #4: There are two radio buttons “All library files” or “Choose Specific files“. The All library files option will download all files while Choose Specific files option allows you to select files which needs to be downloaded. Select “All library files” option unless you have specific requirements.
Step #5: In the Target Location text box you can specify the folder location where you want the library files to be installed. By default Bootstrap will be installed in the default location which is Install button which will download and install the Bootstrap package on your application.
Once it is successfully installed, then you will find libman.json file added to your application’s root folder. Open it and you will find that it contains the following code:
The libman.json file is the Library Manager manifest file which contains the all the libraries (ie. packages) along with their destinations that are installed in the application.
Note that you will find the Bootstrap reference in it.
You can do a number of tasks with the libman.json file, these are:
1. Cleaning Client-Side Libraries
2. Restoring Client-Side Libraries
3. Update Client-Side Libraries
4. Uninstall Client-Side Libraries
Cleaning & Restoring Client-Side Libraries
Cleaning & Restoring Client-Side Libraries can be done quite easily by right clicking on the libman.json file, and it will show up these 2 options. Simply select the needed option to perform the task.
I have shown this in the image below:
Update & Uninstall Client-Side Libraries
The steps to update or uninstall a Client-Side Library are similar. You need to follow the below steps.
1. Open the libman.json file and then click on the client-side library which you want to uninstall or update.
2. You will see a light yellow bulb icon appearing on the left side. Click on this icon to get the options for – whether to update or uninstall that specific client-side library. I have shown this in the below image.
Note: You can also uninstall and update the a client-side library by ‘removing or changing it’s version no’ on it’s entry in the libman.json file and then saving the file.
How to Install Bootstrap in ASP.NET Core Using Bower
When you are using Visual Studio 2017 or earlier versions then Bower is a perfect choice to install Bootstrap Package in your application.
To add Bootstrap to the project I will first need to add Bower Configuration File (bower.json). So right click the project in the solution explorer and select Add ➤ New Item.
The ‘Add New Item’ dialog box will show up. On the left section of this dialog, select Installed ➤ ASP.NET Core ➤ Web. Then on the middle section select Bower Configuration File and click the Add button (see the below image).
The bower.json file will be added and will open for editing in Visual Studio.
Right click the ‘bower.json’ file in solution explorer and select Manage Bower Packages. See the below image for this:
The ‘Manage Bower Packages’ window will open up. Here you click the Browse Tab and on the search box type – ‘bootstrap’.
The bootstrap option will show up on the section that is below the search box. Select it, then on the right side choose it’s latest version and click the Install button to add Bootstrap to your project.
The below image shows this:
In a few seconds time Bootstrap package will be downloaded and ready to be used in your project.
If you open the bower.json file, you will find the bootstrap entry is added inside the dependencies section:
I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you.
SUBSCRIBE TO NEWSLETTER
Enter your email address to subscribe to this blog and receive notifications of new posts by email