Creating an empty ASP.NET MVC site and adding Bootstrap manually

The default ASP.NET 5 project template in Visual Studio 2015 Update 3 currently adds Bootstrap 3 to the project. In order to use Bootstrap 4 in your ASP.NET project, you'll need to create an empty ASP.NET project and add the Bootstrap 4 files manually.

To create a project that uses Bootstrap 4, complete the following process:

1. In Visual Studio 2015, select New | Project from the File menu or use the keyboard shortcut Ctrl + Shift + N.

2. From the New Project dialog window, select ASP.NET Core Web Application (.NET Core), which you'll find under Templates | Visual C# | Web.

   

3. Select the Empty project template from the New ASP.NET Core Web Application (.NET Core) Project dialog window and click on OK.

   

Enabling MVC and static files

The previous steps will create a blank ASP.NET Core project. Running the project as-is will only show a simple Hello World output in your browser. In order for it to serve static files and enable MVC, we'll need to complete the following steps:

1. Double-click on the project.json file inside the Solution Explorer in Visual Studio.

2. Add the following two lines to the dependencies section, and save the project.json file:

           "Microsoft.AspNetCore.Mvc": "1.0.0", 
           "Microsoft.AspNetCore.StaticFiles": "1.0.0" 
   

3. You should see a yellow colored notification inside the Visual Studio Solution Explorer with a message stating that it is busy restoring packages.

4. Open the Startup.cs file. To enable MVC for the project, change the ConfigureServices method to the following:

           public void ConfigureServices(IServiceCollection services) 
            { 
               services.AddMvc(); 
            } 
   

5. Finally, update the Configure method to the following code:

            public void Configure(IApplicationBuilder app, IHostingEnvironment 
            env, ILoggerFactory loggerFactory) 
             { 
                loggerFactory.AddConsole(); 
    
                if (env.IsDevelopment()) 
                 { 
                    app.UseDeveloperExceptionPage(); 
                 } 
    
                 app.UseStaticFiles(); 
    
                 app.UseMvc(routes => 
                 { 
                    routes.MapRoute( 
                    name: "default", 
                    template: "{controller=Home}/{action=Index}/{id?}"); 
                 }); 
              }  
   

6. The preceding code will enable logging and the serving of static files such as images, style sheets, and JavaScript files. It will also set the default MVC route.

Creating the default route controller and view

When creating an empty ASP.NET Core project, no default controller or views will be created by default. In the previous steps, we've created a default route to the Index action of the Home controller. In order for this to work, we first need to complete the following steps:

1. In the Visual Studio Solution Explorer, right-click on the project name and select Add | New Folder from the context menu.

2. Name the new folder Controllers.

3. Add another folder called Views.

4. Right-click on the Controllers folder and select Add | New Item... from the context menu.

5. Select MVC Controller Class from the Add New Item dialog, located under .NET Core | ASP.NET, and click on Add. The default name when adding a new controller will be HomeController.cs:

   

6. Next, we'll need to add a subfolder for the HomeController in the Views folder. Right-click on the Views folder and select Add | New Folder from the context menu.

7. Name the new folder Home.

8. Right-click on the newly created Home folder and select Add | New Item... from the context menu.

9. Select the MVC View Page item, located under .NET Core | ASP.NET; from the list, make sure the filename is Index.cshtml and click on the Add button:

   

10. Your project layout should resemble the following in the Visual Studio Solution Explorer: