Tip: Changing CSS styles in ASP.NET MVC template projects

The ASP.NET MVC application templates that are part of Visual Studio 2013 are very good for many web applications. They use modern HTML5 and CSS techniques, and the default template design uses so-called responsive design, which means the site will work nicely on different device types: desktop browsers, tablets and mobile devices. All this is good.

However, when you start to modify the default template, such as changing colors, you will notice that there's a file called bootstrap.css in the Content folder of the project for this. However, by default, none of the changes you do to this file will become visible, as there's also the minified version of the same file in the project: bootstrap.min.css. If you wanted to see your changes, you'd need to edit this file, too by default.

But, if you look at the project a little deeper, you will notice that the project also had bundling and minification (B/M) enabled, which means the ASP.NET MVC libraries (WebGrease to be precise) will automatically minify your CSS files, including bootstrap.css.

Thus, the make your life easier in changing the default template's CSS settings, there's a simple thing you can do: simply delete the pre-minified bootstrap.min.css file from your project. By removing this file, the bundling and minification system will nonetheless return a minified version to your browser, but you as a developer only need to edit a single file.

Happy hacking!