ASP.NET Core 2.0 - Applying Bootstrap Template

Introduction

This article walks you through the steps for creating an ASP.NET Core 2.0 Web Application using Bootstrap as the template for layout.

STEP1 - Creating the ASP .NET Core Project in VS 2017

Open VS 2017 and in the File menu, click New Project. Then, select Visual C # -> Web template and check ASP .NET Core Web Application (.NET Core).

Enter the name of the application, such as AspNetCoreDemo and click OK.

In the next window, choose the ASP .NET Core 2.0 version, select Web Application (Model-View-Controller) template without authentication, and click the OK button.

STEP2 - Upgrade version if necessary

You can verify the version of Bootstrap in two ways.

First one, accessing the files on wwwroot\lib\bootstrap\dist\css folder. If open, for example, the file Bootstrap.css, we can check that the version of Bootstrap is the 3.3.7.

Another way to verify the Bootstrap version is to check the installed Bower package.

Just select the bower.json file on the project and check the version.

STEP3 - Change Layout

The default bootstrap template used in Visual Studio 2017 is Jumbotron. Jumbotron’s original source code is available here on the Bootstrap website. 

In this sample, we will change this template to a free bootstrap template named "Creative" that could be downloaded from here.

To make that change we need to

• Add a stylesheet, creative.css to the CSS folder
• Add a stylesheet creative.js to the JS folder
• Add the image folder from the template downloaded
• Add the CSS folder from the template downloaded
• Add the vendor folder from the template downloaded
  
  
  

• Now, open the layout file _Layout.cshtml in the Shared folder under Views folder.

Copy the content from index.html to layout.cshtml according to your layout.

This is the sample created with the solution.

This is the sample after our changes.