With ASP.NET MVC 5 and Bootstrap 3 default install, why do styles get a 403 error and fonts throw a 404?

Question

With a default install of ASP.NET MVC 5 and an updated Bootstrap 3, loading my project's home page does not display CSS styles or the included font glyphicons (404 file not found error).

The CSS styles get a 403 "Forbidden to view folder contents" error to the /Content/css address.

The fonts get a 404 error to /fonts folder.

Why?

Answer 1

When you install Bootstrap 3 into the Content folder, it includes a folder structure like this:

~/Content/css/boostrap.min.css
~/Content/fonts/glyphincons-halflinkgs-regular.(eot|svg|ttf|woff)

The 403 "Forbidden" error, is likely because the default CSS bundle route "~/Content/css" matches a valid folder name, and MVC cannot resolve the conflict between a route and folder.

Fix the 403 by renaming your route to something that doesn't match a real folder like, "~/Content/cssbundle".

When you change the bundle name, the 404 "file not found" error occurs for the fonts as the relative path from the CSS files to the fonts is no longer valid.

Fix the 404 by moving your fonts folder to the root of your project. (I wish I had a better solution here)

Answer 2

I too was struggling with this miserably.

There has been an update to the Twitter.Bootstrap nuget package from 3.0.1 => 3.0.1.1. The Twitter.Bootstrap package is now just Bootstrap and has been moved to be managed by the Outercurve foundation.

Chris Kirby has changed the folder structures by eliminating the Content/Bootstrap directory and placing all boostrap.css files directly in the Content folder. He also moved the fonts directory into the root of the site.

See more here; (http://chriskirby.net/bootstrap-nuget-package-moving-to-outercurve/)

This resolved the issue I was having and resolved all my glyphicon font issues.