Click here to Skip to main content
11,923,517 members (62,837 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


32 bookmarked

Twitter.Bootstrap.MVC4: the Bootstrap package for ASP.NET MVC4

, 9 Jan 2013 Apache
Rate this:
Please Sign up or sign in to vote.
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.


This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0


About the Author

eric hexter
Chief Technology Officer
United States United States
I am an Architect for on the Engineering Excellence team. 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 am a Microsoft MVP.

I have founded some online conferences like aspConf, mvcConf, Community For MVC

You may also be interested in...

Comments and Discussions

QuestionErrors Pin
bevans197528-Feb-14 8:03
memberbevans197528-Feb-14 8:03 
QuestionHow can we solve this issue? It happens with VS2012/4.5.MVC4 Razor Pin
Member 311320116-Jan-14 0:09
memberMember 311320116-Jan-14 0:09 
AnswerRe: How can we solve this issue? It happens with VS2012/4.5.MVC4 Razor Pin
Lawrence_7-Feb-14 3:01
memberLawrence_7-Feb-14 3:01 
QuestionNavigationroute errors Pin
Member 1010402812-Oct-13 11:06
memberMember 1010402812-Oct-13 11:06 
AnswerExcellent Pin
Filipe Moreira de Oliveira12-Aug-13 4:49
professionalFilipe Moreira de Oliveira12-Aug-13 4:49 
QuestionThe partial view '_actions' was not found or no view engine supports the searched locations. Pin
msdevtech3-Apr-13 15:25
membermsdevtech3-Apr-13 15:25 
QuestionAction dropdown doesn't work Pin
msdevtech27-Mar-13 15:39
membermsdevtech27-Mar-13 15:39 
QuestionNo style =[ Pin
diegooferreira21-Mar-13 4:30
memberdiegooferreira21-Mar-13 4:30 
AnswerRe: No style =[ Pin
JuanCodeProject18-Sep-13 5:03
memberJuanCodeProject18-Sep-13 5:03 
BugRuntime Error with jQuery 1.9 and jQuery.Validate.js Pin
Aylwyn22-Jan-13 3:33
memberAylwyn22-Jan-13 3:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151125.3 | Last Updated 9 Jan 2013
Article Copyright 2013 by eric hexter
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid