bootstrap.css & stock/shipped website

Hi, I"m new to VS2013 so I’m using the stock "website" provided in during installation of the software to noodle around.

I’m trying something which I thought was quite simple:  change the color of the focus/hover qualities of those menu ribbon options in the black navbar at the top.

via inspect element it seems I’m in the right place — but no "color: #" combo in bootstrap.css has any effect. I’ve stopped and restarted the "home page" also reloading.

Am I in the wrong place?  wrong industry ;-)?  This doesn’t seem like it should be so byzantine but I’m stumped. 

Besides the specific question, perhaps there’s a tutorial of some such out there than get me understanding the lay of the land with such a simple .net app/ws.?

thanks for any input, B.


.navbar-inverse .navbar-nav > li > a {
    color: red;

Not change the color of the liks in the menu at the top?

Do you have an example of the markup that you are currently using?

Bootstrap styles may occasionally be a bit misleading when using the "Inspect Element" option within your browser (as they can generally cascade from parent elements). If you have an inverted navbar element and wanted to change the hover / focus colors,
you might use something like :

/* This style will apply to any "active" elements in your navbar */
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
   background: yellow;
   color: black;

/* This style will apply to any hovered elements in your navbar */
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
   background: yellow;
   color: black;

/* This style will target any brand elements in your navbar */
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
   color: yellow;

You’ll just need to ensure these styles are included / referenced after your existing bootstrap.css files. You can see a
working example here and demonstrated below :

thanks, RionW and Loydall123.  Its obvious I’m having trouble following how everything is working together in the solution/results.  My effort results:

Loydall123 — found the element you posted, tried a color change, no change in results.  My test color is ff00ff

RW: I’m digging deeper to your response (thank you).  Something about it seems to beg digging into how that works vs. what I’m experiencing::

1)  Removed _all_ code from bootstrap.css, saved and re-ran — no change

2) removed the code highlighted in the attached from site.master, saved and re-ran. no change. 

site master removal

Apparently I’ve got something else in this SLN that is controlling default.aspx.  Here’s the page info from that: <%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="MAIS_Records._Default"

MAIS_Records. is the name I Saved As the stock site.      Because I did Save As, I’m presuming I got something more than I expected since the page looks the same when run without its supporting code.     I wanted to open the original stock "site" but can’t
find the SLN — Does anyone know the name of that sln?    All I did was change the text of the menu options and add a couple.   This loads into FF28.0.  Thanks again to all.

hp menu

You’ll need to ensure that the styles that you created to overwrite the existing Bootstrap ones are referenced after your Bootstrap.css file is. This is simply because of the ‘C’ in CSS (denoting "cascading") which gives precedence to styles that
are loaded later than others.

So if you have all of your updated styles that I mentioned earlier within a file called "Site.css", you would want to place within your page so that it was loaded after your Bootstrap CSS files :

<!-- Load Bootstrap CSS here -->

<!-- Load your Site.css File (to overwrite some Bootstrap styles) -->
<link href="~/Site.css" rel="stylesheet" type="text/css" />

You can check the order that your files are being loaded in by viewing the rendered source on your page and seeing what it looks like. Additionally, this could be the result of a caching issue, so I would highly recommend clearing out the cache within your
browser (either manually through Options or by performing a "hard refresh" through CTRL+F5).

Hi,   That’s part of what I’m baffled by:  I didn’t create any new modules/css etc. in the project — I used the existing solution, made some, strictly text/html changes (eg asp: menu li)

saved and ran. 

Caching is a good culprit. FF made no difference. I never tried this in IE – so I knew it was clean, but also shows the same result.  I feel like I’m missing something regarding the firing/cascading order. 

If i remove all the styles from bootstrap.css and save it. (presuming that’s the only place where "navbar" and its brethren are described) How can the page load without error and look exactly like it did before the mass deletion?  

Could it be a VS2013 user usage error/misunderstanding?  debug or release made no diff.  I’m going to check the order of loading as you suggested, but I’m not getting a bright light feeling…  thanks!

How are you currently using those styles that were suggested earlier? Did you edit your bootstrap.css file? If you aren’t using an external CSS file, you’ll want to just add the styles mentioned previously at the very bottom of your bootstrap.css file to
ensure they get applied.

So I finally got to the bottom of this issue.  The culprit was the bootstrap.min.css file. 

I’d created the project based on the web app template (web forms).

the bootstrap.min.css was included in the solution when it was created.

All the changes I made to the bootstrap.css never got propagated to the min version.

The webconfig file had debug=true, so no mins are not done. Wait, the bundles.config didn’t have the min.css listed(?!)

And!  the bundle.config.vb has: BundleTable.EnableOptimizations = True in its registerbundles fx  so mins building overrides the debug in webconfig, and mins should happen if registerbundles() is called

and the global.asax does call registerbundles via Application_start

So why were my changes to bootstrap.css ignored?   ie Why wasn’t the min.css rebuilt?

Since I’ve got debug="true" now, should the min.css file be created?  It has not been.

Also, if and when the min file is created — does the VS solution explorer auto update to show the min file?

Wow, i’m flabbergasted at how byzantine a "solution" can be…  I hope when I grow up, and take on the moniker "novice" @ VS2013  I can look back at these last hours as halcyonic.

till then, thanks for any guidance you folks can provide. B

The built-in Bundling and Minification will not recognize previously minified files unless explicitly configured to do so as mentioned in the Bunding and Minification Overview :

Note: Unless EnableOptimizations is true or the debug attribute in the compilation Element  in the Web.config file is set to false, files will not be bundled or minified.Additionally, the .min version of files will not be used,  the
full debug versions will be selected. EnableOptimizations  overrides the debug attribute in the compilation Element  in the Web.config file.

Thanks for repeating that blurb, I’d seen that yesterday and it got me on a good tack.  I hadn’t read concisely enough.  I’m still missing something though.

For the full duration of this thread, and right now, enableoptimizations are
. (I’ve played with the debug attrib and gotten warnings when trying to kick off a debug run when debug is false).  Debug is false for the remainder of this reply

The existing min had precedence in  the site but was _never_ rebuilt even though 
enableopts had always been true.     It was only once I removed the min from the sln that my changes to the full ver were effective.

Now at this point:  though enableopts is still true 
no min file is created. (nothing added auto to the sln, no min.css found via fileexplr).

Maybe I needed to tell bundle.config to include it? (the thought, being it wouldn’t find it and so create it): add <include path="~/Content/bootstrap.min.css" />

nope no min created.   Poking around a bit more I found in the b&m related web forms F12 link:
        <% styles.render("~/Content/css") %>

I added that to site.master where modernizr is rendered.  No change. Aaagh.

So, is there another step involved? 

I don’t mind jumping through hoops, but the invisible/unknown ones are tough.

still smiling, thanks, B

Leave a Reply