Why are my bootstrap scripts not rendering in MVC4?

May 1, 2013 at 2:59 PMMadestro

I recently decided to play with Bootstrap, a front-end framework for creating websites that are responsive to the type of device used to access them.

I was following an article I found in .NET Curry and everything was going well. For anyone new to Bootstrap, here is a quick overview of the steps to add Bootstrap to an ASP.NET MVC4 application:

  • Add Bootstrap NUGET package to MVC4 application
  • Update jQuery to the required version
  • Add Bootstrap bundles in BundleConfig.cs
  • Modify _layout.cshtml to include Bootstrap scripts and styles
  • Modify _layout.cshtml with the wireframe of your new Bootstrap design
  • Modify your pages based on Bootstrap

(Read the full article for details)

Strangely enough, the styles were not being applied. I did everything the article said!... why is it not working?...

Further examination revealed the Bootstrap scripts and CSS was not being outputted to the page.

After Googling for a while, I found the answer in StackOverflow.

It turns out the BundleCollection class (passed on as a parameter to the BundleConfig class from the Global.asax call) has an IgnoreList property which is an instance of the IgnoreList class that defines items or patterns to ignore. 

Conveniently (or not so) enough, it ignores the ".min" pattern. 

The solutions:

  1. Remove the .min from the script and style paths added in the BundleConfig.cs class, OR
  2. Call the Clear() method of the IgnoreList instance in order to remove the filters:
    • bundles.IgnoreList.Clear();

This will cause your Bootstrap scripts and styles to render as they should.

One more note for those of you getting started with Bootstrap:

Applying the NUGET package only adds the files needed to run bootstrap. It won't magically change your layout and/or pages. Once you get Bootstrap running, go get yourself a page design and/or theme and modify your pages accordingly.

Posted in: ASP.NET MVC