How to Install Bootstrap Package in ASP.NET Core Application in Visual Studio

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)

2. Bower

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.
    Client Side Library
  • 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]”).
    Add Client Side Library
  • 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:
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "lib/twitter-bootstrap/"
    }
  ]
}

What is libman.json file in ASP.NET Core

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:

clean restore libman.json

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.
uninstall update client-side libraries
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).
bower

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:

manage bower packages

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:

installing bootstrap

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:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "v4.4.1"
  }
}
The location of Bootstrap files is inside the wwwroot ➤ lib ➤ bootstrap folder.
bootstrap location
Conclusion
Note that adding of client side libraries can also be done manually by first downloading them from their respective sites and placing these downloaded files in your website’s wwwrooot folder.

With this you are ready to harness the power of Bootstrap in your application. Just add the link to bootstrap css in the _Layout.cshtml file and you are good to go.

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "ASP.NET Core, jQuery, EF Core, SEO, jQuery, HTML" and more.

2 responses to “How to Install Bootstrap Package in ASP.NET Core Application in Visual Studio”

  1. Emmanuel says:

    Dear sir/Madam:
    please am using visual studio 2008 how can I add bootstrap to my Asp.net application?

    thank you for your kind co-operation

    Yours sincerely;
    Emmanuel.

  2. yogihosting says:

    Hello Emmanuel,
    You can add bootstrap by downloading the package from the bootstrap official website. Then copy and paste the package’s folder in your website wwwroot folder. Then in your view you just provide the link to bootstrap CSS and JS files. Check this article – How to Use Bootstrap to Create Responsive Design.

Leave a Reply

Your email address will not be published. Required fields are marked *