Share via

ASP.NET Core - Change Bootstrap layout in 3 Steps

  • Article

This article walks you through the steps for creating an ASP.NET Core Web Application using Bootstrap as a 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, create a solution called ASPNETCoreBootstrap.

  https://code.msdn.microsoft.com/site/view/file/166823/1/1.png

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

https://code.msdn.microsoft.com/site/view/file/166824/1/2.png 

STEP 2 - Upgrade version if necessary

We 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 we see the version is 3.3.6

https://code.msdn.microsoft.com/site/view/file/166828/1/4.png 

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.

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 make that 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

https://code.msdn.microsoft.com/site/view/file/166829/1/5.png

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 our layout.

This is the sample created with the solution:

https://code.msdn.microsoft.com/site/view/file/166830/1/6.png 

This is the sample after our changes:

https://code.msdn.microsoft.com/site/view/file/166831/1/7.png

Other resources:

  • My Blog: https://joaoeduardosousa.wordpress.com/
  • Download Code: https://code.msdn.microsoft.com/ASPNET-Core-Change-8fbeb7cd