Install Bootstrap using Libman

We used the Bootstrap client-side package back in Chapter 1 to improve the look of our application, make CSS easier to work with, and to take advantage of its grid system. There we just copied the link to the bootstrap.min.css file from the Bootstrap site and pasted it in.

In ASP.Net Core MVC, client-side packages are installed using a DotNet tool called Libman. So, we need to install Libman first in order to use it to install Bootstrap.

Install Libman

Open a Console window and set the path to the FredsCars directory containing the FredsCars.csproj file and type the following command to clear out any existing prior version of a Libman install.

dotnet tool uninstall --global Microsoft.Web.LibraryManager.Cli

Next, making sure your console prompt is still pointing to the FredsCars project folder, enter the following command.

dotnet tool install --global Microsoft.Web.LibraryManager.Cli --version 2.1.175

Now check the version of Libman to make sure it is installed by entering the following command into the console.

Libman --verion

Install Bootstrap

Create the libman.json file

Now that we have Libman installed, we can use it to install Bootstrap. Enter the following command into the Console window and press enter.

libman init -p cdnjs

As a result of the command a libman.json file gets created on the root of the FredsCars project.

Double click the libman.js file to open it in a Visual Studio tab and look at the generated JSON configuration code.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": []
}

The default provider is cndjs because we included the -p cdnjs switch in the command.

cdnjs is a Content Delivery Network (CDN) for client-side packages. This is the same CDN the Bootstrap link uses back in Chapter 1. Other options for CDNs are jsDelivr and unpkg.

Install the Bootstrap package

Run the following command in the FredsCars project folder.

libman install bootstrap -d wwwroot/lib/bootstrap

The above command is saying to install the latest Bootstrap distribution into a lib/bootstrap folder under the newly created wwwroot folder. Once the command is complete, your project structure should look like the screenshot below.

Notice the globe icon to the left of the wwwroot folder in the Solution Explorer. This signifies that wwwroot is a special folder in ASP.Net Core MVC. This is where we place all of our static files such as CSS files (which BootStrap is), JavaScript files, images, and any other static files like pdf(s).

And now libman.js has been updated with the Bootstrap client-side package library with the latest version (at the time of this writing), 5.3.3.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "bootstrap@5.3.3",
      "destination": "wwwroot/lib/bootstrap"
    }
  ]
}

You could also type the new code above directly in libman.js and the Bootstrap package would show up under wwwroot/lib/bootstrap indicated by the destination property.

Enable Static file serving

In order for static files to be served from our wwwroot folder, we need to include the UseStaticFiles middleware component in Program.cs. Let’s add that in now before we move on.

var builder = WebApplication.CreateBuilder(args);

// Add Services
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.

app.UseStaticFiles();

/*** Add endpoints for contoller actions and
       the default route ***/
app.MapDefaultControllerRoute();

app.Run();

NOTE: Supposedly, UseStaticFiles() is added in automatically in .Net 6 and later. And I had the application working without it at one point. But, I started getting cross-origin errors for the Bootstrap.min.cs file. Adding it back in explicitly seemed to get rid of the error.

What’s Next

In this module we installed the DotNet Libman tool and used it to install Bootstrap. Now that we have the Bootstrap package installed and ready to go, we can create the Layout template and create a common look and feel for our website. And, the Bootstrap CSS file will be available for us to apply Bootstrap styling.