title: How to override bootstrap styles?
body: <p>I am trying to change simple CSS properties in the default theme that comes with a new ASP.NET MVC 5 application in Visual Studio 2013. In particular I need to change the navigation menu's background color. </p>
  
  <p>I have located via Firebug this property and its new value should be:</p>
  
  <pre><code>.navbar-inverse { background-color: #5B80A5}
  </code></pre>
  
  <p>I initially attempted to add the override CSS line in <code>Site.css</code> because I noticed these lines in <code>BundleConfig.cs</code>:</p>
  
  <pre><code>    bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/bootstrap.css",
                "~/Content/site.css"));
  </code></pre>
  
  <p>However the nav menu's background color didn't change.</p>
  
  <p>I then searched for <code>.navbar-inverse</code> in my solution and the search returned:</p>
  
  <pre><code>Web\Content\bootstrap-theme.css(240):.navbar-inverse {
  Web\Content\bootstrap-theme.css(249):.navbar-inverse .navbar-nav &gt; .active &gt; a {
  Web\Content\bootstrap-theme.css(259):.navbar-inverse .navbar-brand,
  Web\Content\bootstrap-theme.css(260):.navbar-inverse .navbar-nav &gt; li &gt; a {
  Web\Content\bootstrap-theme.css.map(1):{"version":3,"file":"bootstrap-theme.css","sources":["less/theme.less","less/mixins/vendor-prefixes
  Web\Content\bootstrap-theme.min.css(5): */.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger{text-shadow:0 -1px 0 r
  Web\Content\bootstrap.css(4190):.navbar-inverse {
  Web\Content\bootstrap.css(4194):.navbar-inverse .navbar-brand {
  Web\Content\bootstrap.css(4197):.navbar-inverse .navbar-brand:hover,
  Web\Content\bootstrap.css(4198):.navbar-inverse .navbar-brand:focus {
  Web\Content\bootstrap.css(4202):.navbar-inverse .navbar-text {
  Web\Content\bootstrap.css(4205):.navbar-inverse .navbar-nav &gt; li &gt; a {
  Web\Content\bootstrap.css(4208):.navbar-inverse .navbar-nav &gt; li &gt; a:hover,
  Web\Content\bootstrap.css(4209):.navbar-inverse .navbar-nav &gt; li &gt; a:focus {
  Web\Content\bootstrap.css(4213):.navbar-inverse .navbar-nav &gt; .active &gt; a,
  Web\Content\bootstrap.css(4214):.navbar-inverse .navbar-nav &gt; .active &gt; a:hover,
  Web\Content\bootstrap.css(4215):.navbar-inverse .navbar-nav &gt; .active &gt; a:focus {
  Web\Content\bootstrap.css(4219):.navbar-inverse .navbar-nav &gt; .disabled &gt; a,
  Web\Content\bootstrap.css(4220):.navbar-inverse .navbar-nav &gt; .disabled &gt; a:hover,
  Web\Content\bootstrap.css(4221):.navbar-inverse .navbar-nav &gt; .disabled &gt; a:focus {
  Web\Content\bootstrap.css(4225):.navbar-inverse .navbar-toggle {
  Web\Content\bootstrap.css(4228):.navbar-inverse .navbar-toggle:hover,
  Web\Content\bootstrap.css(4229):.navbar-inverse .navbar-toggle:focus {
  Web\Content\bootstrap.css(4232):.navbar-inverse .navbar-toggle .icon-bar {
  Web\Content\bootstrap.css(4235):.navbar-inverse .navbar-collapse,
  Web\Content\bootstrap.css(4236):.navbar-inverse .navbar-form {
  Web\Content\bootstrap.css(4239):.navbar-inverse .navbar-nav &gt; .open &gt; a,
  Web\Content\bootstrap.css(4240):.navbar-inverse .navbar-nav &gt; .open &gt; a:hover,
  Web\Content\bootstrap.css(4241):.navbar-inverse .navbar-nav &gt; .open &gt; a:focus {
  Web\Content\bootstrap.css(4246):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; .dropdown-header {
  Web\Content\bootstrap.css(4249):  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
  Web\Content\bootstrap.css(4252):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; li &gt; a {
  Web\Content\bootstrap.css(4255):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; li &gt; a:hover,
  Web\Content\bootstrap.css(4256):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; li &gt; a:focus {
  Web\Content\bootstrap.css(4260):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; .active &gt; a,
  Web\Content\bootstrap.css(4261):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; .active &gt; a:hover,
  Web\Content\bootstrap.css(4262):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; .active &gt; a:focus {
  Web\Content\bootstrap.css(4266):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; .disabled &gt; a,
  Web\Content\bootstrap.css(4267):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; .disabled &gt; a:hover,
  Web\Content\bootstrap.css(4268):  .navbar-inverse .navbar-nav .open .dropdown-menu &gt; .disabled &gt; a:focus {
  Web\Content\bootstrap.css(4273):.navbar-inverse .navbar-link {
  Web\Content\bootstrap.css(4276):.navbar-inverse .navbar-link:hover {
  Web\Content\bootstrap.css(4279):.navbar-inverse .btn-link {
  Web\Content\bootstrap.css(4282):.navbar-inverse .btn-link:hover,
  Web\Content\bootstrap.css(4283):.navbar-inverse .btn-link:focus {
  Web\Content\bootstrap.css(4286):.navbar-inverse .btn-link[disabled]:hover,
  Web\Content\bootstrap.css(4287):fieldset[disabled] .navbar-inverse .btn-link:hover,
  Web\Content\bootstrap.css(4288):.navbar-inverse .btn-link[disabled]:focus,
  Web\Content\bootstrap.css(4289):fieldset[disabled] .navbar-inverse .btn-link:focus {
  Web\Content\bootstrap.css(6207):.navbar-inverse { background-color: #F7931A}
  Web\Content\bootstrap.css(6208):.navbar-inverse .navbar-nav&gt;.active&gt;a:hover,.navbar-inverse .navbar-nav&gt;li&gt;a:hover, .navbar-inverse .navba
  Web\Content\bootstrap.css(6209):.navbar-inverse .navbar-nav&gt;.active&gt;a,.navbar-inverse .navbar-nav&gt;.open&gt;a,.navbar-inverse .navbar-nav&gt;.ope
  Web\Content\bootstrap.css(6212):.navbar-inverse { background-image: none; }
  Web\Content\bootstrap.css(6214):.navbar-inverse { border-color: #BD7014}
  Web\Content\bootstrap.css(6215):.navbar-inverse .navbar-brand { color: #FFFFFF}
  Web\Content\bootstrap.css(6216):.navbar-inverse .navbar-brand:hover { color: #9E601B}
  Web\Content\bootstrap.css(6217):.navbar-inverse .navbar-nav&gt;li&gt;a { color: #FFFFFF}
  Web\Content\bootstrap.css(6218):.navbar-inverse .navbar-nav&gt;li&gt;a:hover, .navbar-inverse .navbar-nav&gt;li&gt;a:focus { color: #FDFFF7}
  Web\Content\bootstrap.css(6219):.navbar-inverse .navbar-nav&gt;.active&gt;a,.navbar-inverse .navbar-nav&gt;.open&gt;a, .navbar-inverse .navbar-nav&gt;.op
  Web\Content\bootstrap.css(6220):.navbar-inverse .navbar-nav&gt;.active&gt;a:hover, .navbar-inverse .navbar-nav&gt;.active&gt;a:focus { color: #FFFFFF}
  Web\Content\bootstrap.css(6223):.navbar-inverse .navbar-nav&gt;.dropdown&gt;a .caret { border-top-color: #FFFFFF}
  Web\Content\bootstrap.css(6224):.navbar-inverse .navbar-nav&gt;.dropdown&gt;a:hover .caret { border-top-color: #FFFFFF}
  Web\Content\bootstrap.css(6225):.navbar-inverse .navbar-nav&gt;.dropdown&gt;a .caret { border-bottom-color: #FFFFFF}
  Web\Content\bootstrap.css(6226):.navbar-inverse .navbar-nav&gt;.dropdown&gt;a:hover .caret { border-bottom-color: #FFFFFF}
  Web\Content\bootstrap.css.map(1):{"version":3,"file":"bootstrap.css","sources":["bootstrap.css","less/normalize.less","less/print.less","l
  Web\Content\bootstrap.min.css(5): *//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-s
  </code></pre>
  
  <p>I added the custom CSS line at the end of each of the above files but still, nothing happened. I rebuilt the project each time, cleared the cache in my browser, but nothing changed.</p>
  
  <p>Any idea of how to override default boostrap styles? It's driving me nuts!</p>
  
  <p>Similar questions that didn't really help:</p>
  
  <p><a href="https://stackoverflow.com/questions/23410185/overriding-bootstrap-styles">Overriding bootstrap styles</a>,
  <a href="https://stackoverflow.com/questions/18675976/how-to-override-bootstrap-input-box-style-in-table">How to override bootstrap input box style in table?</a>,
  <a href="https://stackoverflow.com/questions/25331453/cant-override-bootstrap">Cant override bootstrap</a></p>