Customizing ASP.NET MVC Bootstrap Templates

In this article, we will see in detail about the ways we can customize our ASP.ENT MVC Application. Here, in this article, we will see three methods to customize our ASP.NET MVC Bootstrap templates.

1. Using ASP.NET MVC Bootstrap Bundle template
2. Using the Bootstrap Bundle Template CSS in our MVC Application
3. Using Bootswatch Free themes for Bootstrap ASP.NET MVC.

Code Part

Using ASP.NET MVC Bootstrap Bundle template.

Installing Bootstrap Bundle

First, we need to download and install the Bootstrap Bundle template. For installing the Bootstrap Bundle template, open Visual Studio 2015 >Click on Tools>Click on Extensions and Updates.



From the search type, “Bootstrap Bundle” and search.



Click Download from the Bootstrap Bundle.



Click on Install to install Bootstrap Bundle template.



Getting started with Bootstrap Bundle template, close Visual Studio and reopen Visual Studio 2015.

Creating Bootstrap Bundle MVC application

Click on Bootstrap Bundle from left side template. Select Bootstrap Bundle MVC site, select your project path and enter your Application name and click OK.



Here, we can see the Bootstrap Bundle template, which has 2 styles, “Bootstrap Example Layouts” and “Start Bootstrap Templates”.

Here, we will see how to get started with “Bootstrap Example Layouts”

Method 1

Bootstrap Bundle Style using Bootstrap Example Layouts

 

Select the Bootstrap example Layouts and click Next button.



Select your master layout style. Here, we have selected “Narrow Jumbotron” layout and click Next button.


Now, we need to select Theme for our Layout. Here, we can see group of theme has been listed in dropdown list.



Here, we have selected “Darkly” Theme for our Website.



Click Next and enter your site's name in the text box and click Next.



Click finish. We can see our MVC Application has been created, press F5 to run our Application, we can see our MVC Application with new Bootstrap template. 



Method 2

 

Bootstrap Bundle Style using Start Bootstrap Templates

Select the Start Bootstrap templates layouts and click Next button.



Now, we need to select our theme for our MVC Web Application. Here, we select “Modern Business” and click Next button.



Now, we can add new Custom controllers or view by selecting from the checkbox. After selection, click Next button.



Here, we have selected a few controllers and views to be added in our MVC Application. Click next after selection.



Here, we have selected “Default” theme for our Website.

Click Next and enter your site name in the text box and click Next.



Click finish. We can see our MVC Application has been created. Press F5 to run our Application. We can see our MVC Application with new Bootstrap template.



Use Bootstrap Bundle template CSS in our MVC Application.

Method 3

Customizing ASP.NET MVC Application using Bootstrap Bundle templates

Now, we need to create our ASP.NET MVC Application and add Bootstrap Bundle templates in our MVC Application. First step is to create our ASP.NET MVC Application. Open Visual Studio 2015>Click Web > Select ASP.NET Web Application (.NET Framework)



Select MVC and click OK to create our ASP.NET MVC Application.

After creating of MVC Application, run to view the default MVC Bootstrap template.

 

Now, let’s add our Bootstrap Bundle “Modern Business” template for our MVC Application. From our Bootstrap Bundle “Modern Business” Web project, select the CSS folder and we need to paste CSS folder to our new MVC Web Application project.



Paste the copied CSS folder to our Web Application.



In our _Layout.cshtml file, we need to add Bootstrap Bundle “css” style to change our template.

Open Views Folder>Open Shared folder and open _Layout.cshtml.



Open the _Layout.cshtml file to CSS to new Bootstrap Bundle layout CSS.



Open your Bootstrap Bundle “_Layout.cshtml.” file and check for CSS names.



Comment the existing default CSS and add Bootstrap Bundle template CSS.



Run the Application and we can see our ASP.NET MVC Application has been applied with new Bootstrap Bundle template.

Use Bootswatch the Free themes for Bootstrap ASP.NET MVC.

Method 3

Customizing ASP.NET MVC Application using Bootswatch templates

Now, we need to create our ASP.NET MVC Application and add the Bootswatch themes in our MVC Application. First step is to create our ASP.NET MVC Application. Open Visual Studio 2015>Click Web > select ASP.NET Web Application (.NET Framework).

Select MVC and click OK to create our ASP.NET MVC Application.



After creating MVC Application, run to view the default MVC Bootstrap template.



Bootswatch provides free themes for Bootstrap. Bootswatch themes are easy to apply for our ASP.NET MVC Application. Visit www.bootswatch.com to see all the free themes for MVC Applications.

 

Here, we have selected “Superhero Theme” from the Website. We can see at the top menu both “bootstrap.css” and “bootstrap.min.css”. This is an open source and we can copy both “bootstrap.css” and “bootstrap.min.css” style codes and replace with our default CSS themes.



From the “bootswatch Superhero”, click on bootstrap.csss menu, copy the CSS style code from the link.

 

To apply the new theme with our default CSS, we need to open “bootstrap.css” from the content folder.



Replace the CSS style with our copied “bootswatch Superhero style”.



Similarly for “bootstrap.min.css” from the “bootswatch Superhero”, click on bootstrap.min.css menu, copy the CSS style code from the link. 



To apply the new theme with our default CSS, we need to open “bootstrap.min.css” from the content folder.



Replace the CSS style with our copied “bootswatch Superhero style”.



Run the Application and we can see our ASP.NET MVC Application has been applied with new Bootswatch Superhero theme.



Note

If you are good at design, you can also customize ASP.NET Default theme by yourself.