Bootstrap with ASP.NET MVC 4 – Step by Step – Without NuGet Package

In this article, I am writing the step by step instruction on creating your first Twitter Bootstrap with ASP.NET MVC 4 web application. I will guide you through and create Responsive Web Design using Bootstrap.

This time, I am not using any bootstrap packages from NuGet. Instead, I will be using the Bootstrap source file directly from the bootstrap website.

If you want to use the bootstrap through NuGet, then read my other articles:

  • Twitter Bootstrap with ASP.NET MVC 4 (Read…).
  • Twitter Bootstrap with ASP.NET (Read…).
  • Twitter Bootstrap Packages for Visual Studio (Read…).

Update (Mar 18, 2018): It’s been nearly 5 years since publishing this article. All the software used here have undergone several upgrades. So I’ve published another article with the recent versions of tools and frameworks. See the updated version of this article using Bootstrap 4 with Visual Studio 2017 and .Net Framework 4.7.1. There I’ve explained about using bootstrap with MVC as well as Web Forms.

Tools and frameworks used:

Sample Source Code:

For your convenience, the sample source code for the files I’ve modified and created in MVC project (_Layout.cshtml, Index.cshtml and HomeContainer.cs) are available in the article Bootstrap with ASP.NET MVC 4 – Sample Source Code.

Steps for creating Bootstrap with ASP.NET MVC 4 Website:

  1. Go to and download the bootstrap files.
  2. Extract the downloaded file. You can see three folders (css, img and js). Inside the css folder there will be four css files. 2 of them are normal style sheet files, and the remaining 2 are minimized files. In the img folder, there will be two png image files. In the js folder there will be two java script files. One of them is a minimized file.
  3. Now Launch Visual Studio.
  4. Go to File menu and select New Project...
  5. Create a new ASP.NET MVC 4 Web Application project.
  6. Select the Basic Template and Razor Engine.
  7. Go to Solution Explorer in Visual Studio. You can see two jQueriy-ui files. Just remove the two jQuery-ui files. (JQuery-UI is another User Interface Framework. As you are using bootstrap in this project, you won’t need jQuery-UI.)
  8. Remove the themes folder within the Content folder. (The themes folder has jQuery-UI css files and images. You don’t need them for this project.)
  9. Right-click the Scripts folder and add the two bootstrap java script (.js) files, which we have downloaded earlier.
  10. Likewise, add the four bootstrap CSS files within the Content folder.
  11. Add a new folder under the Content folder. Name the folder as images.
  12. Add the two png images from the downloaded bootstrap files to the images folder.
  13. Now the project’s folder structure and the bootstrap files looks like this:
  14. Open the BundleConfig.cs file in App_Start folder.
  15. In the BundleConfig.cs file, remove all the lines of code inside the RegisterBundles public static method.
  16. Add the below lines of code instead. The source code of the BundleConfig.cs file is available here.
  17. Open the _Layout.cshtml file in Views >> Shared folder.
  18. From the <head>….</head> section, remove the styles sheet and the script renders.
  19. Add Style Render for both the Bootstrap minimized style sheet (Styles.Render(“~/Content/bootstrapcss”)  below the </title> tag.
  20. The head section looks like this:
  21. let us start working in the body section: Consider the user interface container has two parts.
    (1) A responsive left menu panel.
    (2) And a responsive container to the right of the content.
  22. This container can be achieved by creating a main container using <div>. Bootstrap by default sets the container as 12 spans. So the main container will have 12 sections. Then, in the main container, create two columns with <div>. One column uses 3 spans and the other spans for the remaining 9 spans. Below is the container layout you are going to create.
  23. First remove all the lines from the <body>….</body> section.
  24. In the body section, create a main container with <div> tag and class=”container-fluid”.
  25. Inside the main container, create a row with <div> and class=”row-fluid”.
  26. within the row, create the left-side column with <div> and class=”span3″.
  27. Below the span3 column, create another column with <dev> and class=”span9″.
  28. Now the body section looks like this:
  29. Add the sidebar navigation code inside the span3 column div tags. The side bar navigation starts with a <div> section with class=”well sidebar-nav”. Inside the div, the navigation items are ordered with item list html tags (<ul> and <li>). <ul> tag will have class=”nav nav-list”. The <li> with the class=”nav-header” will have the navigation header. <li> without any class represents the navigation items. You can place the @Html.ActionLink in the <li> tags. Bellow is how the side navigation looks.
  30. Under the span9 column, you can add the @RenderSection and the @RenderBody() to render the content from the view.
  31. Below the main container and just above the closing of </body> tag, add the @Scripts.Render for jQuery and the bootstrap java script files. Make sure the bootstrap script renders at the last.
  32. After completing the changes to the layout file, the file _Layout.cshtml looks like this: (As I’ve mentioned at the beginning, the source code for this file is available here.)
  33. Now you have to create a view and a container, to test the layout you have created using the bootstrap.
  34. For creating a View, Create a folder called Home underneath Views folder.
  35. Right-click the Home folder and add a new view called Index.
  36. In the Index view file, you can add a title, featured section and the content section. I’ve created the a sample as seen below. In the featured section, I’ve enclosed the content with div tag and set the class with bootstrap “hero-unit”. hero-unit presents the content with larger font. Then I’ve added an action link and made it appear like a large button using the bootstrap class “btn btn-primary btn-large”. The source code of the index view is available here.
  37. Now create a controller for the Home folder in view. By default, the HomeContainer will have the code for Index ActionResult. So you don’t need to do any change in the container. Still, I’ve added the source code of the Home container here.
  38. Now build the MVC solution either by hitting the F5 key or by clicking the green build arrow at the Visual Studio tool bar. On successful build, the web page will be launched in the browser, similar to the one shown below.
  39. You can change the size of the browser and see how the responsive design works.
  40. The source code for the files _Layout.cshtml, Index.cshtml and HomeContainer.cs are available in Bootstrap with ASP.NET MVC 4 – Sample Source Code.

Related Articles

  • If you are interested in using Bootstrap NuGet Package for MVC, then read the article Twitter Bootstrap with ASP.NET MVC 4 here...
  • See the article Twitter Bootstrap with ASP.NET Web Forms for step by step details on creating an AP.NET web forms website using Bootstrap as the user interface.

Related Articles & Tools

27 comments for “Bootstrap with ASP.NET MVC 4 – Step by Step – Without NuGet Package

  1. Lakshman
    Jun 14, 2016 at 3:04 pm

    Good article to start with bootstrap…many thanks…

  2. piseth
    Nov 30, 2015 at 6:28 pm

    Hello I’m has follow you but in the section of file _layout.cshtml in views folder i’m cannot see this file but i can see Error.aspx file.Please help me

    • Dec 17, 2015 at 10:06 am

      Hello Piseth,

      Please check whether you have selected a “Project Template” other than “Basic” (as in step 6 in the article). For basic template, there should be 2 files _Layout.cshtml and Error.cshtml under Views >> Shared folder.

  3. Salvo
    Sep 26, 2015 at 3:19 pm

    Beautiful article, congratulation! 🙂 it’s very helpful

  4. Nitin Tyagi
    Aug 7, 2015 at 4:19 pm

    Nice Article but i think text is not fully responsive…

  5. May 1, 2015 at 6:53 am

    I’m trying the same steps with bootstrap 2.3.4. But the images don’t seem to be there in the download. Should i ignore that step?

    • May 1, 2015 at 9:20 am

      Hi Dharmaraj,
      If you are not using the gllphicons, you can ignore them.

  6. ponganesh
    Mar 5, 2015 at 11:59 pm

    Really helpful many thanks for you

  7. Bammidi Vinaykumar
    Feb 24, 2015 at 12:50 am

    Really helpful.. Good people always does good things… And this is the proof

  8. prabhat
    Feb 2, 2015 at 4:24 am

    nice.,,,,,,,,,,,,,,,,,,,,for learn

  9. Sandeep
    Jan 6, 2015 at 5:30 am

    Thanks for such a nice article.. Now i will start using bootstrap with MVC.

  10. harish
    Oct 29, 2014 at 1:49 am

    thank u it helped me a lot Thank u…….

  11. Manuel Soto
    Jul 9, 2014 at 3:07 pm

    Excellent article. Something I do not get is how to modify the scaffolding templates to adapt to the styles of Bootstrap for example: @ Html.EditorFor (model => model) and generate an editor for the model based on their attributes. Have any references?

    • Murtaza
      Nov 12, 2015 at 9:44 pm

      i can not render it in mvc 4

      @Html.LabelFor(model => model.firstname, new { @class = “control-label” })
      @Html.EditorFor(model => model.firstname,new{ @class = “form-control” })
      @Html.ValidationMessageFor(model => model.firstname)

      please help

  12. Jul 9, 2014 at 5:40 am

    Nice Post! Worked!

      Sep 18, 2014 at 12:23 am


  13. Roger
    Jun 30, 2014 at 4:44 pm

    thanks for the tutorial, 🙂

  14. Apr 30, 2014 at 12:46 am

    Works for me using the template bootstrap from

  15. Dec 19, 2013 at 9:12 am

    For advanced customization of the Twitter Bootstrap library in your project using Git branching strategy, see the following blog post:

    • basant
      Feb 15, 2014 at 12:39 am


  16. Gangadhar
    Dec 12, 2013 at 11:56 am

    Thank you very much. I could not create the project using Nuget. This helped me a lot.

  17. jayant
    Dec 12, 2013 at 4:09 am

    Thanks very much

  18. LBSingh
    Nov 20, 2013 at 9:53 am

    bootstrap-responsive.css is missing in current bootstrap version that’s why i am not able to see the css classes which you mentioned in screenshots like container-fluid etc. where are these css classes mentioned in css files?
    please help me.

    • Nov 20, 2013 at 10:38 am

      Hello Singh,
      I’ve used Bootstrap v2.3.2 for this article. When I was writing this article, the location to download bootstrap v2.3.2 libraries was different. Now they have moved v2.3.2 downloads to Please download it from . I’ve updated the article as well.

  19. ghee
    Sep 20, 2013 at 11:35 pm

    I followed this instructions using visual studio 2010. I made few tweaks with the right path and everything goes well. Thanks!!!

  20. Paolo
    Sep 14, 2013 at 3:36 am

    Good Article but…you don’t speak about the bundleconfig file to register bootstrap css and js that is used in Layout..

    • Sep 14, 2013 at 4:32 pm

      Hello Paolo,

      Thank you for pointing it out. I’ve added the bundle config steps now.

Leave your thoughts...

This site uses Akismet to reduce spam. Learn how your comment data is processed.