How to Use Bootstrap in ASP.NET Core MVC?. The Complete ASP.NET Core Developer Course 2023 [Videos].

The recommended way to install client-side dependencies like Bootstrap in ASP.NET Core is via Bower (using bower. json , as shown above). The use of npm/NuGet are shown to demonstrate how easily Bootstrap can be added to other kinds of web applications, including earlier versions of ASP.NET.

How to Use Bootstrap in ASP.NET Core MVC Application

In this Video, I am going to discuss How to Use Bootstrap in ASP.NET Core MVC Application. Please read our previous Video before proceeding to this Video where we discussed the Application using Library Manager (Libman). Here, I will discuss how to use bootstrap as well as how to create and use custom CSS in a view.

Creating a Custom Style Sheet in ASP.NET Core MVC Application:

First, create a folder with the name CSS within the wwwroot folder. All the custom CSS files are going to be created within this folder. Once you create the CSS folder, let’s add a CSS file with the name MyCustomStyleSheet.css.

To create a style sheet, right-click on the CSS folder and then select “Add – New Item” from the context menu. Then search for css and select Style Sheet, provide a meaningful name and finally click on the Add button as shown in the below image.

Once you add MyCustomStyleSheet.css file, then your wwwroot folder should looks as shown below.

Note: All the site custom CSS need to be placed within the MyCustomStyleSheet.css file. So, open the MyCustomStyleSheet.css file and copy and paste the following code in it.

.btn {
     width: 80px;
}

How to Using Bootstrap in ASP.NET Core MVC Application?

In order to use bootstrap, first, you need to include a reference to the bootstrap.css file. You can add the reference in each individual views. But as we are going to use the Layout file, so we are going to add a reference to the bootstrap.css file in the _Layout.css file. Along with bootstrap.css, we are also including a reference to our custom style sheet i.e. MyCustomStyleSheet.css.

Modifying the _Layout.cshtm file:

Please modify the Layout file which is present in the shared folder as shown below.

As you can see in the HTML code, we have included references for both bootstrap.css as well as MyCustomStyleSheet.css files. Here, we are also using the bootstrap container class for positioning the elements on the page.

Creating Models:

Within the Models folder, add a class file with the name Student.cs and then copy and paste the following code in it.

Modifying the Home Controller:

Please modify the Home Controller as shown below.

Modifying the Startup class:

Please modify the Startup class as shown below. Here, to serve the bootstrap we need to add the static files middle layer before the MVC middle layer in the request processing pipeline.

Modifying the Index view:

Please modify the Index view of Home Controller as shown below.

Modifying the Details View:

Please modify the Details view as shown below.

That’s it. Save the changes and run the application and see the output as expected. Here, we have just created the View, Update, Delete, Back buttons but not implemented. In our upcoming Videos, I will show you how to implement the CRUD operation in ASP.NET Core MVC Application.