Why Is Bootstrap Trying to Load Less Files in Edge

Why is Bootstrap trying to load LESS files in Edge?

The good news is this won't be affecting regular users of the site. The bad news is this is also happening in Chrome to some extent, it's just that the network tab in Chrome isn't reporting the 403 errors.

In the CSS file that you link to there is a line at the bottom of the file:

/*# sourceMappingURL=bootstrap.min.css.map */

This is the source maps and gives links to all the source files used to generate the minified CSS that is in your browser.

In the bootstrap instance the CDN is pointing to files that do not exist such as http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/scaffolding.less

The source map file will only be downloaded if you have source maps enabled and your dev tools open. Edge defaults source maps on and as far as I can tell there is no way to switch them off (but remember this will only happen when the dev tools are open, I have confirmed this behaviour using Fiddler), so when you press f12 then it's going to try and fetch the source mapped files. Chrome works slightly differently, it will download the source map but then will not attempt to download the .less file until you navigate to the source file.

If one of the .less files is returning a 403 Forbidden response Edge reports this in the network tab. Chrome dosen't.

If you use http debugger such as Fiddler you will see that Chrome does indeed request the files and also gets a 403 response, however, it doesn't report it on the network tab. When using Fiddler to get past the https issue I changed the CSS file to point to the non https URL. e.g: http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

The fix for this issue is to fix the files that are 403'ing in the source map. I have raised an issue on the bootstrap maxcdn GitHub repro: https://github.com/MaxCDN/bootstrap-cdn/issues/629

IE/MS Edge links in Bootstrap col-* not working on page load

This appears to be a bug in Internet Explorer, and Microsoft Edge. I was able to determine the cause to be the temporary application of overflow: hidden to the body, and the floated/positioned layout of the anchors below the fold. It appears as though IE/Edge determine these to be unreachable links (initially) as a result of the overflow: hidden styling.

I have reduced your page to the following:

<!doctype html>
<html style="overflow-y: scroll; height: 100%;">
    <head></head>
    <body style="margin: 0; height: 100%">
        <a style="float: left; position: relative; margin-top: 1000px" href="#">Link</a>
        <script type="text/javascript">
            document.body.style.overflow = "hidden";
            setTimeout(function () {
                document.body.style.overflow = "visible";
            }, 2000 );
        </script>
    </body>
</html>

This combination results in non-functioning below the fold anchors.

A bug has been filed for the Microsoft Edge team to evaluate this issue.

Track this bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7843412/

Why I can see Less instead of CSS in a browser

So I imagine you know that LESS is a CSS compiler and what is surprising you is that the LESS files are showing up in the dev tools and not some huge bundled CSS file?

This magic, is to do with something awesome called source maps. Source maps allow the browser to point to specific LESS or SASS files and show you exactly where the code is coming from. Think about trying to debug a design and the browser say the style is coming from line 2754 in style.css, well that's no good to you because your styles are only compiling into style.css and you need to know where to make the change in your LESS file.

Thankfully that's exactly where source maps come into play. So they aren't really loading in the browser, the browser just knows what LESS file that piece of code in the CSS is coming from.

How can I combine my LESS file with the default bootstrap less file

I usually create an app-specific version of the main bootstrap file, let's call it app-bootstrap.less. Just copy the contents of the default bootstrap.less into this file. Here's also your chance to comment out parts of bootstrap that you're not using (e.g. popovers, panels, forms etc). Alternatively you could just do @import "bootstrap.less"; if you're using all of it.

What you'd do next is to add in your own panels.less. The directory search order used is likely determined by your setup, but I guess it would not be an easy task having @import "panels.less"; in app-bootstrap.less mean one thing (i.e. "import panels.less from local directory") and another in panels.less (i.e. "import panels.less from bootstrap). Therefore, what you could do is put your panel additions in app-panels.lessinstead and make sure that file is imported in your app-bootstrap.less.

Css not working in chrome, (works in edge or if i open the file locally on my pc)

Have you tried to reload with Ctrl + F5 ? The page is exactly the same for me between Firefox and Chrome.

twitter bootstrap .hidden-lg less not working

NOTE: as of August 2013, this has been fixed in Bootstrap, so the workarounds below are no longer necessary. (https://github.com/twbs/bootstrap/pull/9211)

Bootstrap's responsive mixins aren't built to handle what you're trying to accomplish.

Poke around in responsive-utilities.less and mixins.less and you'll see that the responsive utility classes (.hidden-lg,.visible-lg, etc.) don't actually contain any @media queries, so embedding them in your CSS won't make them respond to screen size changes. For these classes to work properly, they need to be added directly into your HTML.

But as a workaround, you can copy Bootstrap's @media queries from responsive-utilities.less and directly apply the visibility mixins to your styles:

.promo-pod {

    /* Turn element off for all screens */
    .responsive-invisibility();

    /* Turn element back on for large screens */
    @media (min-width: @screen-desktop) {
        .responsive-visibility();
    }

}

It's not a perfect solution, but it's the best you can do unless Bootstrap rearchitects their visible/hidden styles.

Edit (alternative solution):

If you'd like to use .visible-sm, .visible-lg, etc. directly in your CSS as you first asked, then add this snippet to your LESS file:

.visible-sm {
  .responsive-visibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
  @media (min-width: @screen-desktop) { .responsive-invisibility(); }
}
.visible-md {
  .responsive-invisibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
  @media (min-width: @screen-desktop) { .responsive-invisibility(); }
}
.visible-lg {
  .responsive-invisibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
  @media (min-width: @screen-desktop) { .responsive-visibility(); }
}

.hidden-sm {
  .responsive-invisibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
  @media (min-width: @screen-desktop) { .responsive-visibility(); }
}
.hidden-md {
  .responsive-visibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
  @media (min-width: @screen-desktop) { .responsive-visibility(); }
}
.hidden-lg {
  .responsive-visibility();
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
  @media (min-width: @screen-desktop) { .responsive-invisibility(); }
}

Then you can do this:

.promo-pod {
  .visible-lg;
}

It's simply a reorganization of Bootstrap's responsive utilities from responsive-utilities.less. (I may add a pull request to Bootstrap to see if something like this can get pulled into the master branch.)

How to import variables between files with LESS - currently getting 'undefined'

Make sure to import the .less file rather then the .css. You can import .css, I'd only recommend always working from .less files. You may run into a lot more issues while importing the .css rather than the .less.

It looks like your .LESS code structure is just a tad incorrect. Try replacing this:

#menu, #sub-menu {
.span2;
color: @bodydarker1;
height: 100%;
min-height: 100%;
padding: 1%;
}

with this:

#menu, 
#sub-menu {
    .span2 {
        color: @bodydarker1;
        height: 100%;
        min-height: 100%;
        padding: 1%;
    }
}

edit:

If you're trying to access .span2 under your custom #menu id then you'll have to see what namespace it's under in the bootstrap (if it's under a namespace) and then adjust accordingly.

Example

#bootstrap {
    #lists {
        .span2 {
            // some span2 stuff
        }
    }
}

#menu, 
#sub-menu {
    #bootstrap > #lists > .span2;

    color: @bodydarker1;
    height: 100%;
    min-height: 100%;
    padding: 1%;
}

Why Is Bootstrap Trying to Load Less Files in Edge