Easiest way to use Twitter Bootstrap with your MVC project

TwitterBootStrapMVC for MVC4

At present there are a lot of Twitter Bootstrap nuget packages. Some of these include sample projects. Some of them are just the basic Bootstrap JavaScript and CSS files. Most of them are not setup to make it easy to write 'Bootstrap' HTML out of the box.

I recently came across a Bootstrap 3 MVC package called TwitterBootstrapMVC that really helps you get up and running with Bootstrap much faster than some of the other options out there. No need to remember the correct HTML to use or the right class to put on your textbox. Using the very intuitive TwitterBootstrapMVC helpers, everything is simple.

Before I begin, I have to put my hands up and confess that I have not tried every single Bootstrap nuget package out there. Life's too short for that! What I've found with this solution is that it helped me get up and running quicker than the other solutions I looked at. It might help you or you might prefer to use another package. It's your call. I'm only offering my 2 cents on my experience with this software. With that out of the way, let's dive in!

The first thing you'll probably notice is that to use the Bootstrap 3 version of this software you must purchase a license. At the moment the price is $9.99 for a single developer / freelancer and $29.99 for companies. As software goes, I think that's very reasonable. If you don't want to pay for the software than the great news is that you can use the Bootstrap 2 version of the software for free. Personally, I think you'd be mad to start a new project using Bootstrap 2 as this stage but at least it gives you a nice way to experiment with the software before you buy it.

To get up and running I downloaded the nuget files into my MVC4 project and went to the site to purchase a license. You need to put this license into the project root folder and update your web.config and global.asax file as per the install instructions. Out of the box this software does not include Bootstrap itself. You can either download the CSS and JavaScript directly from the GetBootstrap.com site or through nuget.

Once all of that software is downloaded and plugged into your project you need to add the Bootstrap JavaScript and CSS files to your _Layout.cshtml page.

To use the helpers for TwitterBootstrapMVC you can use the documentation for Bootstrap2 on the official site or use the Bootstrap 3 documentation on CodeProject. Over time the author will update the official site with Bootstrap 3 documentation but for now these are your 2 best resources.

The time saved from using this plugin made the purchase a no brainer for me. It helps ensure that everyone on your team writes proper Bootstrap HTML if they use the helpers. Textboxes, checkboxes, submit buttons and more are all output with the correct HTML so you can get on with building that kickass app rather than messing around with Bootstrap's HTML and CSS.

blog comments powered by Disqus

Get In Touch

Follow me online at TwitterFacebook or Flickr.

Latest Tweets