ASP.NET MVC application with Custom Bootstrap Theme -VS 2012, VS 2013 and VS 2015

• Download demo - 9.1 MB

Introduction

In this article I will show how to create an ASP.NET MVC web application with a custom bootstrap theme / layout. For this demo I am using Visual Studio 2012, ASP.NET MVC 4, a custom bootstrap theme (Bootstrap Business Casual).

Background

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. It provides a default a layout, fonts and JavaScript widgets like accordion, carousel and many more. You can either take the default boostrap.css or you can use custom bootstrap themes available online to create your ASP.NET MVC Bootstrap Web application. In this article I will show how you can easily change the default ASP.NET MVC layout and apply custom bootstrap theme / layout to your MVC web application.

Getting Started

This tutorial is can be used for VS 2012 and VS 2013 and VS 2015.

For creating an ASP.NET MVC web application with custom bootstrap theme:

Step I – Download the bootstrap theme you intend to implement in you ASP.NET MVC application and keep it ready. (You may need to extract the files from zip folder in to a separate folder). For this demo I am using a custom bootstrap theme - Business casual, I have downloaded the theme from following website https://startbootstrap.com/template-overviews/business-casual/ .

Step II – Create an ASP.NET MVC web application, follow the steps mentioned below.

• Open VS 2012 / VS 2013 / VS 2015 and create new project select web – ASP.NET MVC 4 web application.
• Enter project name –“ASPNETMVC_BootstrapCustomThemeDemo”. Click Ok
• Select Internet template(VS 2012 / VS 2013) and click ok. Select ‘MVC’ for VS 2015
• The custom bootstrap I am about to implement has a Blog menu and a Blog.html page, so I have created a Blog.cshtml view and an Action for the same in HomeController, also added the blog menu in _layout.cshtml. (see Fig.3)
• After the project is created, just press F5 to run the application and in the web browser you would find the default ASP.NET MVC application template displayed.(see Fig.3)

Note: For VS 2015 there is a slight difference, Every ASP.NET MVC web application project comes with the default bootstrap theme installed (see Fig.1) and the ASP.NET MVC template is a Bootstrap template – jumbotron (see Fig.2). You would need to first uninstall current / default Bootstrap version and jQuery package using NuGet Package Manager and then follow from step III

Step III- To implement the Custom Bootstrap them in your ASP.NET MVC Web application.

• As we are going to implement the bootstrap CSS framework we do not need this Site.css, so the first thing you need to do is open the Site.css file and delete all the content from this file (See Fig.4), then save the file and close it, We would still need this file to override the bootstrap CCS elements.
• 
• Next open the Bootstrap Custom theme folder (startbootstrap-business-casual-gh-pages), you would see few files and folders – you need to copy the CSS, Fonts and img folder to the project structure, under the Content folder (See Fig.5)
• 
• Next open the js folder inside the Custom theme folder, copy all the JavaScript files from this folder to the Project structure, under Scripts folder (see Fig 6)
• 
• Next got to Visual Studio and on the top of Solution explorer bar, Click on “Show All files” option to view the files and folders we copied to the project folders (See Fig. 7)
• 
• Next, to make files and folders part of the project - Right click on each of them and select option “Include in Project” (See Fig. 8)
• 

Step IV- To configure the ASP.NET MVC web application with the custom bootstrap theme:

• In the Solution Explorer, Open the BundleConfig.cs file under App_Start folder, and add the below to the bundle configs (also See Fig. 9)

• bundles.Add(new ScriptBundle("~/bundles/jquery")
  				.Include("~/Scripts/jquery.js")); 
  bundles.Add(new ScriptBundle("~/bundles/bootstrap")
  				.Include("~/Scripts/bootstrap.js"));
  bundles.Add(new StyleBundle("~/Content/css")
  				.Include("~/Content/site.css")
  				.Include("~/Content/bootstrap.css"));
  

  
   
• Next open the index.html file from custom theme folder and update the _layout.cshtml view , under Views/shared. Note: Almost all custom themes are designed with a generic layout, so much of the elements / components are repeated in each page, as a developer for MVC we need to separate out the code that is repeated and would go in layout page and the code that would go in the index page.
   
• Copy the head section from the index.html page to the _layout.cshtml and make the changes ( see Fig. 10)
  
   
• Next Replace the Header tag section inside body tag in _layout.cshtml with the nav tag from index.html (see below). Also make the following changes to the relative path of the images and add the @html.ActionLink() for each of the views, also do the highlighted changes (see Fig. 11)
  
• Next scroll down and replace the footer Section inside the body tag in _layout.cshtml with footer tag from index.html (see Fig. 12) and save the changes.
• 
   
• Next setting up the Index.cshtml view – for this copy only the container section below nav-bar and paste it into Index.cshtml (see Fig. 13). Note: we would not copy the nav-bar the footer section as it is already present in our _layout.cshtml. Also make sure you reference the _layout.cshtml at the top (see below), as it contains the nav-bar and footer details
  
  
   
• As the Index.cshtml is having Carousel, we need to add the jquery.js and bootstrap.js and also the jquery script for Carousel (see Fig. 14) at the bottom of the index.cshtml view
  
  
   
• Next setting up the About.cshtml view – for this open the about.html file, copy only the container section below nav-bar and paste it into About.cshtml (see Fig. 15). Note: we would not copy the nav-bar the footer section as it is already present in our _layout.cshtml. Also make sure you reference the _layout.cshtml at the top (see below), as it contains the nav-bar and footer details
  
  
   
• Next setting up the Contact.cshtml view – for this open the contact.html file, copy only the container section below nav-bar and paste it into Contact.cshtml (see Fig. 16). Note: we would not copy the nav-bar the footer section as that is already present in our _layout.cshtml. Also make sure you reference the _layout.cshtml at the top (see below), as it contains the nav-bar and footer details
  
  
   
• Finally setting up the Blog.cshtml view – for this open the blog.html file, copy only the container section below nav-bar and paste it into Blog.cshtml (see Fig. 17). Note: we would not copy the nav-bar the footer section as that is already present in our _layout.cshtml. Also make sure you reference the _layout.cshtml at the top (see below), as it contains the nav-bar and footer details
  
  
   
• Close all the .html files and Save all your work. Now , just press F5 to run the application and in the web browser there you go, you will see the ASP.NET MVC application displayed with the custom bootstrap template we implemented ( see Fig. 18)
  
  

Few points to note:

• _layout.cshtml would contain the common elements – lie the header (logo), Menu and footer- in case of dynamic components make sure to reference the jquery.js and boostrap.js file at the bottom of the page and if required some jQuery script.
• Make sure you are reference the image and the CSS links properly.

This completes the steps required for creating an ASP.NET MVC web application with a custom bootstrap theme.