0

I created a default web project (ASP.NET Core Web Application, Web Application Model-View-Controller, ASP.NET Core 2.0) using VS 2017 version 15.0.26929.2.

I want to override the background color for the bootstrap pills as shown here: Changing color of Twitter bootstrap Nav-Pills

Markup

<ul class="nav nav-pills red">
  <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
  <li><a href="#tab2" data-toggle="tab">Sample</a></li>
  <li><a href="#tab3" data-toggle="tab">Sample</a></li>
</ul>

CSS

.red .active a,
.red .active a:hover {
    background-color: red;
}

I added the markup to the index.cshtml view and the css to site.css file.

When I use Firebug to detect why the style changes are not applied I see that the bootstrap.css file is downloaded twice. Once before the site.css and again after.

Why is bootstrap.css downloaded again ?

Please note that I have not have any other changes to this project.

Network tab in firebug

enter image description here

Ásgeir Gunnar Stefánsson
  • 549
  • 1
  • 5
  • 21

1 Answers1

2

It's not loaded twice. The status code 304 is telling the client that it is about to recieve a bootrap file that is not modified, meaning if it already has a cached one it don't need to load it. The 200 says that it has loaded a file.

You can solve the design by either changing the bootrap files themselves, or you could mark your css code with !important like:

.red .active a:hover {
background-color: red !important;

}

just load it after your bootrap css file.

Johan Herstad
  • 672
  • 7
  • 15
  • Thanks. This fixes the display issue. I noticed when I deployed the project that there is only one reference to bootstrap, i.e. I therefore wonder if the second reference in the dev enviroment is a Kestrel issue. – Ásgeir Gunnar Stefánsson Nov 16 '17 at 08:49