ASP.NET MVC Application with Custom Bootstrap Layout

  • Article

Introduction

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 to implement bootstrap in your web application or you can use custom bootstrap themes available for free or purchase premium themes. 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.

This article is developers having experience working on ASP.NET MVC web application and has knowledge on bootstrap, CSS, HTML, JavaScript and JQuery. 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). 

Getting Started
This tutorial is can be used for ***VS 2012 and VS 2013 and VS 2015.  ***For VS 2015 – there is a slight difference, the default ASP.NET MVC web application project comes with bootstrap installed (see Fig.1) and the ASP.NET MVC template is the bootstrap template – jumbotron (see Fig.2).You need to first uninstall current / default bootstrap version and jQuery package using NuGet package manager and then follow below steps to implement custom bootstrap theme.
https://code.msdn.microsoft.com/site/view/file/159753/1/Fig%201.PNG
https://code.msdn.microsoft.com/site/view/file/159754/1/Fig%202.PNG

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)

https://code.msdn.microsoft.com/site/view/file/159755/1/Fig%203.PNG

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

  • As we are going to implement the bootstrap CSS frame work 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 need this file to override the bootstrap CCS elements.

https://code.msdn.microsoft.com/site/view/file/159757/1/Fig%204.PNG

Next open the 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 MVC application Content folder ( See Fig.5)
https://code.msdn.microsoft.com/site/view/file/159758/1/Fig%205.PNG
Next open the js folder inside the Custom theme folder copy all the JavaScript files from this folder to the MVC application Scripts folder ( see Fig 6)
https://code.msdn.microsoft.com/site/view/file/159759/1/Fig%206.PNG
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)
https://code.msdn.microsoft.com/site/view/file/159760/1/Fig%207.PNG
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) 
https://code.msdn.microsoft.com/site/view/file/159761/1/Fig%208.PNG

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 following to the bundleconfigs (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")); 
 

https://code.msdn.microsoft.com/site/view/file/159763/1/Fig%209.PNG

  • Next open the index.html file from custom theme folder and update the _layout.cshtml view of the MVC application. 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)

https://code.msdn.microsoft.com/site/view/file/159764/1/Fig%2010.PNG

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)

https://code.msdn.microsoft.com/site/view/file/159765/1/Fig%2011.PNG

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.

https://code.msdn.microsoft.com/site/view/file/159766/1/Fig%2012.PNG

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

https://code.msdn.microsoft.com/site/view/file/159767/1/Fig%2013.PNG

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

https://code.msdn.microsoft.com/site/view/file/159768/1/Fig%2014.PNG

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

https://code.msdn.microsoft.com/site/view/file/159769/1/Fig%2015.PNG

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

https://code.msdn.microsoft.com/site/view/file/159770/1/Fig%2016.PNG

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
https://code.msdn.microsoft.com/site/view/file/159772/1/Fig%2017.PNG

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)
https://code.msdn.microsoft.com/site/view/file/159774/1/Fig%2018.PNG

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. 

Resources :
Download code from here: Sample Code

Happy Learning