strange behaviour: bootstrap.css vs. site.css

Trying to apply some specific bootstrap layouts turned into strange results. For example I simple wanted to horizontally centering an input box, or one of these special composite bootstrap controls combining an Input box and a button left or right side, within a md-12 row and got a layout result that aligns the Input box left side and the button right side. The Level of strangeness depends on the current size of the viewport e.g. mobile phone vs. desktop monitor.

To resolve this issue I did a lot of stackoverflow but without any result.

I ended up with a simple approach: Remove the site.css file from spa template completely and andapt the bündle.config then.

This "tweak" works for me and did not result in any new layout issues ;-): The bootstrap Composite controls are now aligned/centered as expected. 

ASP.NET MVC5: Organizing large solutions with areas

A working example by code snob:

http://codesnob.wordpress.com/2014/03/06/mvc-area-in-an-external-assembly/

and the source code (vs solution):

https://github.com/drydenmaker/PMMA-MVC


Advice:
Perhaps if you are encountering an jquery error on executing too then please check the _Layout.cshtml file. Scroll to bottom of file and look for this stuff:

 
@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)


If  the line @Scripts.Render("~/bundles/jquery"

) is missing then please insert this code snippet right before  
@Scripts.Render("~/bundles/bootstrap")
Then it will work properly !

Thanks.