Click here to Skip to main content
15,116,815 members
Articles / Web Development / HTML
Article
Posted 12 Feb 2017

Stats

87K views
3K downloads
36 bookmarked

Customizing ASP.NET MVC Bootstrap Templates

Rate me:
Please Sign up or sign in to vote.
4.61/5 (22 votes)
23 Feb 2017CPOL5 min read
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.

Introduction

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.

Using the code

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

Image 1

From the search type “Bootstrap Bundle” and search.

Image 2

Click Download from the Bootstrap Bundle.

Image 3

Click on Install to install Bootstrap Bundle template.

Image 4

To getting started with Bootstrap Bundle Template close the 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.

Image 5

Here we can see the Bootstrap Bundle template has 2 style as “Bootstrap Example Layouts” and “Start Bootstrap Templates”.

Here first we will see how to getting started with “Bootstrap Example Layouts”

Method 1: Bootstrap Bundle Style using Bootstrap Example Layouts

Select the Bootstrap Example Layouts and click Next button.

Image 6

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

Image 7

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

Image 8

Here we have selected “Darkly” Theme for our website.

Image 9

Click Next and enter your Site Name in the text box and click Next.

Image 10

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.

Image 11

Method 2: Bootstrap Bundle Style using Start Bootstrap Templates

Select the Start Bootstrap Templates Layouts and click Next button.

Image 12

Next, we need to select our Theme for our MVC web application. Here we select “Modern Business” and click Next button.

Image 13

Next, we can add new Custom Controllers or View by selecting from the checkbox. After selection click next button.

Image 14

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

Image 15

Here we have selected “Default” Theme for our website.

Image 16

Click Next and enter your Site Name in the text box and click Next.

Image 17

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.

Image 18

 

2) Using the Bootstrap Bundle Template css in our MVC Application

Method 3: Customizing ASP.NET MVC application using Bootstrap Bundle Templates

Now we create our ASP.NET MVC application and add the 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)

Image 19

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

Image 20

After creating of MVC application run to view the default MVC bootstrap template.

Image 21

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 the CSS folder to our new MVC web application project.

Image 22

Paste the copied CSS folder to our web application

Image 23

Next in our _Layout.cshtml file we need to add the Bootstrap Bundle “css” style to change our template.

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

Image 24

Open the _Layout.cshtml file to change the default css to new Bootstrap Bundle layout css.

Image 25

 

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

Image 26

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

Image 27

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

Image 28

3) Using Bootswatch the Free themes for Bootstrap ASP.Net MVC.

Method 3: Customizing ASP.NET MVC application using Bootswatch Templates

Now we 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)

Image 29

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

Image 30

After creating of MVC application run to view the default MVC bootstrap template.

Image 31

Bootswatch is provides Free themes for Bootstrap. Bootswatch Themes are easy to apply for our Asp.NET MVC application. Visit www.bootswatch.com to see all free Themes for MVC Applications.

Image 32

Here we have selected “Superhero Theme” from the website we can see at the top menu we can see 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.

Image 33

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

link.

Image 34

To apply the new theme with our default CSS. We open “bootstrap.css” from the content folder.

Image 35

Replace the css style with our copied “bootswatch Superhero style”

Image 36

Same like this for “bootstrap.min.css” From the “bootswatch Superhero” click on bootstrap.min.css

menu, Copy the CSS style code from the

Image 37

To apply the new theme with our default CSS. We open “bootstrap.min.css” from the content folder.

Image 38

Replace the css style with our copied “bootswatch Superhero style”

Image 39

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

Image 40

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

History

MVCSampleTemplate.zip - 2016/02/13

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

syed shanu
Team Leader
India India
Microsoft MVP | Code Project MVP | CSharp Corner MVP | Author | Blogger and always happy to Share what he knows to others. MyBlog

My Interview on Microsoft TechNet Wiki Ninja Link

Comments and Discussions

 
Questionadd images Pin
erummirza22-Aug-21 22:30
Membererummirza22-Aug-21 22:30 
Questionthank you Pin
bishoe19-Oct-17 11:30
Memberbishoe19-Oct-17 11:30 
QuestionWhere to find Bootstrap Bundle Pin
PauloRicFerr24-Feb-17 4:10
MemberPauloRicFerr24-Feb-17 4:10 
GeneralMy vote of 4 Pin
Karthik_Mahalingam14-Feb-17 19:57
professionalKarthik_Mahalingam14-Feb-17 19:57 
GeneralMy vote of 5 Pin
Tokinabo14-Feb-17 2:20
professionalTokinabo14-Feb-17 2:20 
GeneralMy vote of 4 Pin
Klaus Luedenscheidt12-Feb-17 19:52
MemberKlaus Luedenscheidt12-Feb-17 19:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.