ASP .Net MVC Web Application integrating bootstrap templates

Question

I know I will probably get too many down votes for this question, but I just could not find a tutorial to my problem.

I have created a ASP .Net MVC project in Visual Studio 2013 (New Project -> ASP.NET Web Application -> MVC) and I am trying to change the default bootstrap for this project, I have downloaded bootstrap templates from different websites but I just can not use them in my project. I have followed a few questions on SO and some tutorials but all I could was change some styling, not entirely use the template I want to use.

Tutorial that I read:

http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step

http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-asp-net-mvc-5

SO Questions:

bootstrap 3 template change mvc5

Bootstrap Jumbotron not becoming full width of Body

After reading above questions and a few more tutorials here and there, I was able to change the theme but not the template, I want to use a parallax theme like this one

I copied the css into bootstrap.css, javascript into bootstrap.js and HTML into my page Home page but then _Layout.cshtml is messing up the display...

My Questions:

1.) Am I doing this the wrong way?

2.) What changes should I make to the _Layout.cshtml file to display the template properly?

3.) I read that there are different versions of bootstraps, the default version that is used in the project when I created it is V3.0.0 and some templates that I downloaded are V3.1.1, Will they be compatible? I followed this to upgrade the bootstrap version of my project to V3.1.1 after that some more .js and .css files were added to my project and things got more complicated.

4.) What will be the _Layout.cshtml file if I use bootstrap V3.0.2 ?

Any help will be appreciated...

EDIT:

I am trying to use this template:

Template

Template

Answer 1

Integrating Bootstrap Template into ASP .Net MVC 5:

1. First of all create a new Project:

   Web Application -> MVC

2. Run your Project by pressing F5, it will look like:

3. Now check that your downloaded Bootstrap Template Folder contains following:

   • css (Folder):
     • bootstrap.css
     • bootstrap.min.css
   • js (Folder):
     • bootstrap.js
     • bootstrap.min.js

   _{Note: Sometime bootstrap.css may be named as style.css and bootstrap.js may be named as style.js}

4. You will be making changes to following files in ASP .Net MVC Project:

   • bootstrap.css
   • boostrap.min.css
   • bootstrap.js

   • bootstrap.min.js

     

5. Open your all the files mentioned above in code editor:

   

6. Now do the following:

   • Copy all of the code from bootstrap.css (Template css Folder) to bootstrap.css (Content Folder)
   • Copy all of the code from bootstrap.min.css (Template css Folder) to bootstrap.min.css (Content Folder)
   • Copy all of the code from bootstrap.js (Template js Folder) to bootstrap.js (Scripts Folder)
   • Copy all of the code from bootstrap.min.js (Template js Folder) to bootstrap.min.js (Scripts Folder)

7. Now its time to adjust your _Layout.cshtml according to the Theme. We will be splitting the index.html file from the Theme folder into two parts, one part will go into _Layout.cshtml and one part will go into 'Index.cshtml`:

   

8. Replace your _Layout.cshtml code with the code below:

   _Layout.cshtml

9. Replace your Index.cshtml code with the code below:

   Index.cshtml

10. Now run your Project it will be like:

    Link

This is how I solved my problem.