Twitter.Bootstrap.MVC4; the Bootstrap package for ASP.Net MVC4

UPDATE: To learn more about the Package read these blog posts:

Bootstrap as described by the project website is:

“Sleek, intuitive, and powerful front-end framework for faster and easier web development”.

It is open source and was written and supported by Twitter. Unlike most front end frameworks, Bootstrap is interesting because in addition to it being a full featured CSS framework, it adds javascript plugins, typography, html scaffolding and components. The best part is that I am cool with all of Bootstraps dependencies, which means I like it. An advantage that Bootstrap has over the default ASP.Net MVC template is that it is designed to be extended and changed. There are a whole host of themes for bootstrap that build on the basic html structure and css classes, so if you want to change the look you can drop these in. Check out WrapBootstrap, Bootswatch, and other Resources.

Twitter.Bootstrap.MVC4 Nuget

Introducing the Twitter.Bootstrap.MVC4 nuget package; It will save you time adding bootstrap to MVC4. It combines the existing Bootstrap package with MVC 4 and makes you more productive from step one. This is the work of a spike Matt Hinze created, I then packaged it up to share it with the world.

Install twitter.bootstrap.mvc4 from nuget

> Install-Package twitter.bootstrap.mvc4
> Install-Package twitter.bootstrap.mvc4.sample

This nuget package does the following: (so you don’t have to)

  1. Razor Layout template, it includes the standard sections that are in the default razor templates, like the head and scripts sections.
  2. Bundles the bootstrap CSS and Javascript files, for combination and minification of the default files, using the new MVC 4 bundling feature.
  3. Navigation Routes helper to create the top menu of your site quickly.
  4. Default Views for Index, Details, and Edit. You can use this for all of your admin screens. No need to write views for any of the CRUD based screens. Spend your time writing the front end of your application/website.
  5. Alerts are added through helper function in a controller base class using tempdata for the Post-Redirect-Get pattern.
  6. View Templates, for form generation from built in MVC scaffolding.
  7. Sample controller (separate nuget package, twitter.bootstrap.mvc4.sample) to demonstrate the default views and alerts.

Before digging into the details of how this is implemented in the code, here are some examples of what these look like in the browser after installing the package into an empty MVC 4 application.




By adding two routes ( Home and My Account) the routes show up in the main navigation bar. Here is a sample of how to create Navigation Routes.

Default Views

Three razor views are placed in the Views/Shared folder; Index, Edit, and Details. These views can act as default views, so you do not need to create views when you are just listing, displaying or editing view models. This of this as runtime scaffolding.



This is an example of the default Index page. Simply return a IEnumerable of your view model and a listing table will be automatically created. This page uses the default bootstrap table formatting and action button dropdown. The field headers are the Property names of the view model split into natural words, and the name of the view model is listed at the top of the page. Through some small conventions you can in crease the velocity of your back end admin screen development by only writing the controllers and models, the views come for free.

Index – Action dropdown


The above screenshot shows the Action dropdown menu, which can be extended to add additional actions to very easily.



This is the default Details view. Just return a view model and this will be automatically generated.


The default edit/create template integrates the bootstrap forms styles using the recommended markup and styles.



Above is the example of the default edit screen, that takes full advantage of MVC 4 Editor Templates.

Edit Validation



Above is the example of the bootstrap validation which comes in the default edit view.


The layout template has bootstrap alerts built into the template, and a base controller adds helper methods for adding data to each type of alert.



The above figure shows the Success alert displayed in green above the table.



The above screenshot shows the Information and Warning alerts in yellow and blue, above the table.


Want to know more about this in the mean time, look at the bootstrap documentation and the bootstrap.mvc4 project site on github. Feel free to start some discussions on the Issues list and send pull requests. If there is enough activity I will create a discussion group for the project.


I will post more details about how to use each of these features, but for now, install the sample nuget into an Empty MVC4 application and look at the HomeController, it is pretty simple and easy to digest.

Follow me on RSS and Twitter

About Eric Hexter

I am the CTO for QuarterSpot. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I co-founded online events like mvcConf, aspConf, and Community for MVC. I am also a Microsoft MVP in ASP.Net.
This entry was posted in Asp.Net, Asp.Net MVC, Bootstrap.mvc, CodeProject, mvc, nuget, Open Source Software, OSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Wouter

    Wow Thanks!!

  • Builderofthimgs

    Excellent work. I already decided on Bootstrap for my MVC4 project, and this will definitely save me some time.

  • This is awesome! Thanks  Eric. Nice Job.

  • Looking good. Thanks for sharing!

  • If you want to use LESS instead of plain CSS (which I recommend if you’re using Bootstrap), here’s an alternate way to add Bootstrap to MVC:

    • erichexter

      Thats nice.. I would like to just integrate that into this package. nice work putting that together. would you want to contribute this to the project?

      • I haven’t figure out how to modify an existing BundleConfig.cs via Nuget which is one of the bigger steps to making it work. 

        You’re free to use anything you feel would be useful.

        I know some companies/people don’t want to use LESS so there is definitely a need for what you have already.

  • Marcio Parente

    This is so true. I’m using twitter bootstrap in my own project at and is the best way to save time. I also add an extension for twitter bootstrap to help developers use their MVC skills.

    Very good post! Thanks,
    Marcio Parente 

  • Bill

    Little more info on adding Navigation via routes? i’m confused

    • Walt

      Bill, you’re not the only one.  More info on “adding two routes”.  Thanks!

      • erichexter

        I will follow up with more in a blog post.. Also, I should add some more to the sample package, that might really help clear it up.

  • Nikunj Dhawan

    Excellent Stuff! Loved it.

    I really like bootstrap and ASP.Net MVC 4, fastest development platform.

  • Walt

    One minor recommended change to “_alerts.cshtml” to keep “ATTENTION” messages from displaying twice … change line 10 to:

    @foreach(string key in Alerts.ALL.Where(x => x != Alerts.ATTENTION))

  • Nick Smith


    Please excuse my ignorance here, just created a new ASP.Net MVC 4 Web Application and then run install-package twitter.bootstrap.mvc4 followed by install-package twitter.bootstrap.mvc4.sample

    I get a notification in the Package Manager Console in the install of the 1st package ”Views_ViewStart.cshtml’ already exists. Skipping…’   I manually replaced the text in my _ViewStart to refer to the BootstrapLayout.cshtml layout and tried to run the application.

    I’m then presented with the following error

    The following sections have been defined but have not been rendered for the layout page “~/Views/Shared/_BootstrapLayout.cshtml”: “featured”.

    Have I set up the wrong kind of project in the first place as it seems I’m getting quite a few conflicts with the standard ASP.Net MVC 4 Application

    Really keen to see what this package can do for me so any advice appreciated

    Many thanks


    • erichexter

      Your on the money. You need to start with an mvc4 Empty project.

  • Nick Smith

    my bad!

    Note to self… change the selection from ‘Internet Application’ to ‘Empty’ before posting a comment!

    now where did I put the wine

  • Thanks Eric for this awesome work. 

    I tried to get navigation to display additional “tabs” and could not succeed. 
    I looked at the helper method and saw that it enumerates only NamedRoute instances of the Routing collection. 
    So I tried to add a NamedRoute. After getting rid of all compile errors because of different parameters to MapRoute I ran the application only to get a Yellow Screen of death complaining about something of the routing mechanism not being available. 

    As the sample Nuget package does not contain any NamedRoutes, could you perhaps post an example how we should add routes to get them displayed in the navigation? 

    Thanks for the good work. 

  • CD

    The AddView template is referencing jQuery version 1.6.2… is that a typo? The currently bundled jQuery version is 1.8.2.

    • Eric Hexter

      I will need to look at that.. The template must be out of date.
      If you are so inclined, I also accept pull requests..: 

      • CD

        Thanks, but I don’t use GitHub so I’m no help there. I also have to agree with previous posters that the navigation for menu items isn’t very intuitive. The Gist you posted doesn’t work either, it creates the About link with an href going to /home/index. I’d prefer to just add my own @html.ActionLink list items but even doing that doesn’t work as something seems to hijack the route and everything just routes to “/”… 

        • erichexter

          I ll double check the gist.. I will put a separate post on the navigation. You could just change the template for navigation and add your own action links, but you would loose the automatic active menu item functionality, or you would at least need to manage that yourself.. I will put some thought into ways to extend it and put that into the post.

        • Hi CD, 

          I asked Eric the same question, and he did correct the Gist already. 

          I find the usage of NamedRoute to designate a top-level menu item rather compelling. 

          If you add these two lines you get 2 navigation Tabs with complete handling of active state and correct navigation urls. All thanks to Eric: 

          //This is the first Navigation routeroutes.MapNavigationRoute(“Home-navigation”, “Home”, “”, new { controller = “Home”, action = “Index” });//This is the second Navigation routeroutes.MapNavigationRoute(“About-navigation”, “About”, “Home/About”, new { controller = “Home”, action = “About” });

          I always found views with all this “if user is in role then add a link” nonsense rather being spaghetti code. 
          This way you can completely hide your role or user-dependent things in the RouteConfig and have a single line in the view to insert navigation links. 

          Good job, Eric. 

          • CD

            Yeah I agree about the spagetti code with roles, that’s how my last project looked. Now that the About route is fixed I can see how I need to create more top level routes… but what about routes that are a sub-menu of the top level, how would that be handled? Also, the EditorFor on the date won’t populate the date on the Get method of Create. If I change it to TextBoxFor it will populate. I ran into this same issue with the jQuery datepicker, the date has to be formatted as a shortdatestring but that introduces it’s own complexity. Eric, can you see the issue I am talking about? I’d love to use this in our next business app.

          • erichexter

            Based on all the feedback, I am going to put some work into the navigation routes to support, submenus and filtering based on request
            context… authorization, ect…

          • CD

            That would be awesome Eric! The only other issue I see that would make this completely viable in a business app is getting the date working in the EditorFor… it works with a TextBoxFor  - Because it can accept a datetime data type, the EditorFor cannot, it requires a string in order to show the value and also the calendar widget.

          • CD

            Another problem I see is the Save Changes buttons and the Cancel buttons in Create view both post the form, the Cancel should just redirect, not try to post.

          • erichexter

            Yes, it does, either looking to change that to an anchor or adding a action filter to redirect server side.

          • CD

            I replaced the cancel button html with @Html.ActionLink(“Cancel”, “Index”, null, new { @class = “btn” }) and it works as expected.

  • Halfload

    I was sold a few weeks ago with Twitter Bootstrap v2.2.1.  We’re integrating it into everything we develop now.  Your MVC4 with Twitter Bootsrap is fantastic.



  • Why does not the date show up in the edit view?

  • Mark

    Hi – this looks really good, and something I’ve been trying to add manually til now.  Will there be support for the Account Controller going forward – or if you use the Internet template, are there any issues with adding this project to that – or will the account controller work as it does in the normal internet template (I’m asking as a newbie to MVC) – thank you.  Mark

  • Nice. Couple of FAQs.
    1. How can I get the navigation to also work with the mobile view (nav menu icon in the upper right corner)?
    2. is there a small sample somewhere where you use all these features (code)?
    3. How does the AddView code template work?

    • erichexter

      the mobile nav works out of the box.
      The sample is in the sample nuget project. I will be adding a navigation sample to it.

      Eric Hexter

      blog |
      info |

    • Félix Roberto Aballí Morell

      Is there any official tutorial that we could use for customize our coding?
      Thanks in advance.

  • Brent Seufert

    I’ve been using KnockoutJS with MVC4 and am thinking of using Bootstrap for styling etc.  As it looks like from your blog that you use both, are you using together in MVC4 app?  Any observations?

    • erichexter

      I have used both and they work well for the scenarios we need them for.

      • Brent Seufert

        I’m thinking of a mashup of the knockoutmvc project and this one to combine the two.

  • Brent Seufert

    Thanks for this… I like it very much, but the Edit action does not populate the date for editing.  

  • Hi Eric, when I implement the package there’s a compilation error that does not go away even if I close and reopen or rebuild the site, it says that this method is invalid:

    ‘System.Web.Optimization.BundleCollection’ does not contain a definition for ‘RegisterTemplateBundles’

    I comment that line but the sample site does not load all the Bootstrap features, it seems that the RegisterTemplateBundles is deprecated in the final release of ASP.NET 4.0, but you seem to do the final implementation in the BootstrapBundleConfig configuration class.

    Does the Global.asax needs both of these lines ??

    BundleTable.Bundles.RegisterTemplateBundles();            BootstrapBundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);

    • erichexter

      The bundling capabilities have been updated on nuget. Please update the web.optimization package.

      Eric Hexter

      blog |
      info |

    • Paul Keister

      I had to add the following line to Global.asax.cs:

      If the bundles don’t initialize, the CSS links don’t resolve and the site looks terrible.

      • erichexter

        The nuget package adds that line to the global asax file.. did this happen on a brand new project? I wonder why this did not work for you. Maybe the project was under source control and the nuget script failed to update the file…

  • Williams Jackj

    Like a boss. Thanks for this great nug!

  • Thomas Eyde

    I have a problem with validation messages, they are not formatted properly. That is, the markup seems to be correct, but the redness is missing.

  • John Reilly

    Hi Eric,

    First up, thank you – this is fantastic!  I was looking for a nice way to bring together MVC and Twitter Bootstrap and this seems to be just that.  I’m particularly pleased with the jquery validate integration as that’s a tool I’ve come to find invaluable.

    I’ve got a question and an observation if you’ve a moment.  

    First up the question: I noticed that if
    you just install the “twitter.bootstrap.mvc4” package you’ll get errors as ExampleLayoutsRouteConfig
    contains references to ExampleLayoutsController.  ExampleLayoutsController exists in “twitter.bootstrap.mvc4.sample”
    and so unless you also install the “twitter.bootstrap.mvc4.sample” package you’ll
    get compile time errors.  Is this
    right?  Or is the idea that no-one would ever just install “twitter.bootstrap.mvc4” – they should always also install “twitter.bootstrap.mvc4.sample” as well?

    Now the observation.  I wonder if it’s worth mentioning that the fastest way to get up and running with this sample is to create a new MVC 4 application in Visual Studio called “BootstrapMvcSample” using the “Empty” Project Template before installing the packages?  I say this as I first attempted to use a couple of different Project Templates which didn’t work so well with your package.  And having the name “BootstrapMvcSample” saves you having to go through and change the namespaces manually.

    Thanks again for this work – I’m really looking forward to the HtmlHelpers you mentioned as well.  Sounds great!

    • erichexter

      Thanks for the comments.

      1. The route config is a bug, I need to remove that sample config from the main package.

      2. The main package twitter.bootstrap.mvc4 is the main package. Right now it only works well by adding it to an Empty MVC4 project. We have an item in the backlog to get the project working with the Internet project template as well. I think that could reduce some of the pain and provide access to the user system that comes in that sample as well.

      • John Reilly

        Thanks Eric, that sounds great.

        I’m having a little play with the package at the moment.  Just trying out including the bootstrap datepicker to see if that would slot in nicely. ( ) 

        Early signs promising :-)

      • John Reilly

        Hi Erich, (and apologies for previous spelling mistakes)

        I was able to get twitter.bootstrap.mvc4 working with the bootstrap datepicker without too much trouble.  If you’re interested, I wrote about my experiences here:

  • Guy Lister

    Am I missing something?  I’ve tried the nuget .sample installation.  When it runs, the Action pull down menu does not work.  It seems bootstrap.min.js is not being included.  

    Sad because I see others discussing this sample.  I’m using vs2012.

    Any suggestions?

    • Guy Lister

      Never mind.  I found the problem in ViewsShared_Layout.cshtml.  At the end, insert     @Scripts.Render(“~/js”) around line 15.

  • Yoshito

    Hi Eric, could you give an example on how to use the navigation route filter to filter some menu based on Roles? I have trouble figuring that out. thanks

    • Liviu Marciu

      I also need to implement that and I think the correct place to put your filtering by user role code is in the NavigationRouteFilter.cs in the ShouldRemove method.

  • Taofeek Lasisi

    I’m new in Web Dev. My whole career has been DeskTop, Client/Server (excluding Web client) stuff. But Web dev is my new focus since I intend to port some of my apps to the cloud and leverage on maintenance and removing app elements controlmaintenance issues from my clients.

    However, most of the samples I’ve seen are much too hard-coding stuff (quite unlike WinForm). And, most samples dwell on lists and I’m yet to see a clean master-detail sample implentation for, say, Sales Invoice.

    Again, there seem to be an endless list of frameworks either doing same things or overlapping. For a novice like me, it’s a flux. In WinForm, I can find my ways around even if I choose a plethora of 3rd party controls and components because I know where they all stand in my scheme.

    But Web! There’s Breeze, EF, ColdFluent, knockoutjs, Wakanda, MVC, nancy, fubuMVC, open rasta, etc. What I’m saying is if I have a project using MVC 4 and I wish to take advantage of Breeze and move same project to MVC {n} (n>4). Where do these frameworks stand. If I’ve used knockoutjs for binding and a new cool tech comes out how do I migrate without breaking another framework (like, MVC).

    I’ve chcked some of your posts and they are really cool. Some things I didn’t understand after skimming thru some articles and a book on Professional ASP.NET 4 just jumped at me here. NavigationMapRouting and menu stuff. I’ve not seen it elsewhere. The grayed comments sure did the trick in some cases. I’ll keep a tab on your articles.

    Thanks. You can’t imagine what the navigation route filter implementation will do. I implemented WYSIWYG in WinForm and stuff like this gets me scary whenever I think of Web development but with this article my mind is made up.

  • Rams

    Thank you. Thank you. Thank you. Was looking for something like this for my app. Was getting bogged down adding simple maintenance features. Now I can concentrate on the real stuff. 

  • Thank you, Eric      We have also found Bootstrap a way to go and we have created an infographics about it  I hope your readers will find it useful

  • wadep

    Hi Eric, I’m having problems getting the model Edit to work showing the existing Start Date (see attached screenshot).

    Also….. Is it possible to have dates edited with a Calendar DatePicker rather than a TextBox?

    Any help appreciated.

    Regards, Paul

  • Tomas Winston

    Hi Eric!
    Is it possible to attach additional attributes to Editors when using this solution?
    For example, I have tried to customize an id attribute on an input control but it is not rendering. I have done this using the format:

    HTML.EditorFor(model => model.DateTimeFrom, new {id=”deDateTimeFrom”})

    However this is not working and I can’t think of how to get around the issue. 

    Can you advise please? It would be much appreciated!



  • The Index Action dropdowns in the sample project do not work

  • You also need to go through this article and do some proofreading it is filled with typos…

  • Got it installed and running in 5min. Would’ve only taken 2 if I’d read the instructions. :)

    Looks great, thanks for this.

  • AkAlan

    I would like to know if there are any issues when using Kendo UI and Bootstrap.

  • Arayeh

    Is it absolutely a better approach to go with Twitter.Bootstrap.MVC4 or just Twitter.Bootstrap will suffice? Thanks

    • erichexter

      It maters what you need?

      • Arayeh

        I need to make a whole website responsive. Our existing project is with MVC4. However, we might need to revamp the entire site. I’m still in the research phase and I’m trying to figure out the most optimal way to go about it. Current site is heavily dependent on the numerous existing div’s. So I’m not sure even it’s possible to integrate the site with Bootstrap or I have to start from scratch. I appreciate your insights to help us decide to take the best approach.

  • curious why this module doesn’t show up in a search inside the nugget pkg manager?

  • Melkisadek

    Hi Eric – I’ve added a question to StackOverflow regarding html actionlinks in the shared Index page used in this package. I’m not sure where else to ask – is there anything simple I’m missing? If not then it isn’t mad important…

  • RyanVice

    This looks great Eric! Thanks to you and Matt for putting it together.

    That said I’m not getting any styling when installing Twitter.Bootstrap.MVC4 into a ASP.Net MVC 4 Empty project. I created a StackOverflow post about it here:

    Any help getting started greatly appreciated.

    Also for others, Mister James has some great videos on using this project on youtube:

    • dejan

      I have the same problem too. I have no styling at all. How can I fix this. I installed both packages on Emty EMVC4 project using Visual Studio 2012

    • Chin

      @RyanVice did you figure a solution? thanks.

  • Chin

    I created an empty MVC4 project in VS 2012, then i installed using nuget.

    Install-Package twitter.bootstrap.mvc4.sample

    Following screenshot is the rendering. I thought this might be a browser cache issue, i tried on my friends machine and i get the same result. I cleared browser history and cache to see if any CSS was conflicting. Any other stuff i can do to troubleshoot?

  • Jim

    BootStrap javascript works on local development server but not when deployed on a web server. Drop down button stops working for instance. Any Ideas?

  • allen simmer

    Eric: I’m having problems. I create an empty MVC project, use NuGet to install twitter.bootstrap.mvc4 adn twitter.bootstrap.mvc4.sample and get Navigationroute errors right out of the box. Specifically in AdministrationRouteFilter.cs: navigationRoutes.DataTokens.HasFilterToken()) and
    navigationRoutes.DataTokens.FilterToken(); – both say “Have no extension method. Also, in ExampleLayoutsRouteConfig.cs: NavigationRouteFilters – “does not exist in the current context” – and NavigationRouteOptions – “type or namespace could not be found etc..” I’d appreciate some help. I don’t know if I’ve may have missed some manual changes that I’m supposed to make. Thanks much. Can’t wait to get it working and looking forward to the MvcInternet version.

    • hardy

      I’m having the same issue.

      • allen simmer

        Hardy: Eric has indicated that since VS2013 will soon have Bootstrap 3.0 support, the current project is most likely moot. I personally backed off to VS2012 and installed BS 3.0 manually.

        • veve

          I’m havning the same pb (VS2013….)

    • student

      I’m the same with you!!

  • Patrick de Bie

    Hello Eric,

    I’m currently having problems installing your NuGet package. When I call ‘Install-package twitter.bootstrap.mvc4′ I receive the following errormessage:

    Updating ‘jQuery 1.9.1′ to ‘jQuery 1.4.1′ failed. Unable to find versions of ‘Twitter.Bootstrap, jQuery.Migrate, Microsoft.jQuery.Unobtrusive.Ajax, Microsoft.jQuery.Unobtrusive.Validation’ that are compatible with ‘jQuery 1.4.1′.
    At line:1 char:16
    + Install-Package <<<< twitter.bootstrap.mvc4
    + CategoryInfo : NotSpecified: (:) [Install-Package], InvalidOperationException
    + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

    Got any ideas?

    • User18

      Same problem. How to fix it?

      • Christopher Gordon

        Before running “install-package twitter.bootstrap.mvc4″ run “Install-Package Microsoft.jQuery.Unobtrusive.Ajax” and then “Install-Package jQuery.Validation”. Afterwards, your install should run fine.

        • it’s good!

        • John

          Thank you Christopher!!! Now it works!

  • rachna

    Thanks for sharing. Please
    check our Free Responsive
    Bootstrap Template for Women at

  • Trey Rulon

    visit:Social media marketing

    I really happy to see this post because long time I was looking for this topics related site. It’s really important for me because I research about this topics. If you can get more information here.

  • Stevensen Liu