Twitter Bootstrap Installation + MVC 4

When installing twitter bootstrap for ASP.NET MVC 4 (Visual Studios Express 2012 for Web) I had to conduct the following steps

First go to the NuGet package manager under tools

  • > Install-Package twitter.bootstrap.mvc4.sample -Version 1.0.90
  • > Uninstall-Package twitter.bootstrap.mvc4.htmlhelpers -Force
  • > Install-Package twitter.bootstrap.mvc4.htmlhelpers -version 1.0.90
  • > Uninstall-Package twitter.bootstrap.mvc4 -Force
  • > Install-Package twitter.bootstrap.mvc4 -version 1.0.90

(refer to the stackoverflow discussion http://stackoverflow.com/questions/19618771/how-to-resolve-mvc4-twitter-bootstrap-project-fail-from-simple-nuget-installatio)

After following the steps from the stack overflow discussion I had problems when running the site.  I would get a Navigation Route Error.  So I took the following steps,

  1. Go to Global.asax – top layer of your project
  2. In the Application_Start() class you will see the following two lines printed three times
    • BootstrapSupport.BootstrapBundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);
    • BootstrapMvcSample.ExampleLayoutsRouteConfig.RegisterRoutes(RouteTable.Routes);
  3. Comment out the duplicate lines of code. Which for me was on lines 29-32

Now you can start working with bootstrap!

Note:  I looked at the Git Hub for the file and found that the issue has been solved with their latest revision but does not take effect when the steps above are taken.

One may say where do I get started?

  1. I would start in your Shared file with changing items in your _Layout.cshtml to _BootstrapLayout.basic.cshtml. Since there is no need anymore for the _Layout file.
  2. Choose a bootstrap theme and download the files
    1. Replace/Add the old sample files with the new files
      1. bootstrap.css, bootstrap.min.css …
    2. Make changes from Site.css to bootstrap.css
  3. Update your HTML div’s to include bootstrap classes

About these ads

One thought on “Twitter Bootstrap Installation + MVC 4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s