ASP.NET Core 1.0 - Change Bootstrap Layout In Three Steps

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.

Press OK, and a new screen will appear with several options for the template to use on our project.
Select the option Web Application.

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

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