ASP.NET Core 1.0 – Change Bootstrap layout in 3 Steps

Introduction

This article walks you through the steps for creating a ASP.NET Core Web Application using Bootstrap as template for layout and change it to a new one.

STEP 1 – Create ASP.NET Web Application

  • Open Visual Studio 2015 and create a new project of type ASP.NET Core Web Application.
  • On this project I create a solution called ASPNETCoreBootstrap.

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

STEP 2 – Upgrade version if necessary

You can verify the version of bootstrap on two ways.

First one, accessing the files on 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.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 solution.. option.
  • In 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

STEP 3 – Change Layout

The default bootstrap template used in Visual Studio 2015 is Jumbotron. Jumpotron’s original source code is available here in bootstrap website.

On this sample we will change this template to a free bootstrap template Creative that could be download here:https://startbootstrap.com/template-overviews/creative/.

To made tha t change we need to:

  • Add the style sheet creative.css to the CSS folder
  • Add the style sheet 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 Folder and copy the content from index.html to layout.cshtml according to your layout

This is the sample created with solution:

This is the sample after our changes:

Advertisements

About João Sousa
Senior Software Engineer in .Net (Microsoft Certified MTCS and MCPD). .NET Microsoft MVP 2015

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: