Introduction
This article walks you through the steps for creating an ASP.NET Core Web Application using Bootstrap as a template for layout and changing it to a new one.
STEP 1 - Create ASP.NET Web Application
- Open Visual Studio 2017 and create a new project of type ASP.NET Core Web Application.
- On this project, I created a solution called ASPNETCoreBootstrap.
![ASP.NET Core]()
- Press OK, and a new screen will appear with several options for the template to use on our project.
- Select the option Web Application.
![ASP.NET Core]()
STEP 2 - Upgrade version if necessary
You can verify the version of bootstrap in two ways. First, by accessing the files in the lib\bootstrap\dist\css folder. If we open, for example, the file Bootstrap.css, we can check that the version of bootstrap is 3.3.6.
Another way to verify the bootstrap version is to check the installed Bower package.
- Right click the solution and select Manage Bower packages for the solution.
- On the Manage Bower screen, select Installed Packages section.
- Then, select the bootstrap package in the center pane to see the version details.
As you see, the version is 3.3.6.
![ASP.NET Core]()
STEP 3 - Change Layout
The default bootstrap template used in Visual Studio 2015 is Jumbotron. Jumbotron’s original source code is available here in the bootstrap website.
In this sample, we will change this template to a free bootstrap template Creative that could be download here.
To make that change, we need to:
- Add the stylesheet creative.css to the CSS folder
- Add the stylesheet creative.js to the JS folder
- Add the img folder from template downloaded
![ASP.NET Core]()
Now, open the layout file _Layout.cshtml in the Shared folder under Views, and copy the content from index.html to layout.cshtml according to your layout.
This is the sample created with the solution.
![ASP.NET Core]()
This is the sample after we made our changes.
![ASP.NET Core]()