How to load local copy of bootstrap css when the cdn server is down?

Question

As of now I'm using like this for javascript

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script>    $.fn.modal || document.write('<script src="js/bootstrap.min.js">\x3C/script>')</script>

I'm loading bootstrap.css from bootstrapcdn like this

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

Can someone tell me how to load local copy if the cdn server is down.?

I would just assume that if the js is missing, the css is probably missing too. — Kevin B, Jan 03 '13 at 15:09
Are you using serverside scripting? You can do an http request and a simple if statement based on boolean (true|false) result. So you would set the local version as a default failover. — Frank Tudor, Jan 03 '13 at 15:11
Check out this question: http://stackoverflow.com/questions/5257923/how-to-load-local-script-files-as-fallback-in-cases-where-cdn-are-blocked-unavai — GautamJeyaraman, Jan 03 '13 at 16:07
Assuming that if the bootstrap js loaded ok that the bootstrap css would have loaded ok too leaves a small chance of an accident: if the JS gets accidentally deleted by the CDN admin... — Matt Parkins, Nov 02 '17 at 15:21

score 17 · Accepted Answer · edited Mar 30 '16 at 05:14

My solution for this was to have an empty div using the bootstrap hidden class style at the top of the body:

<div id="bootstrapCssTest" class="hidden"></div>

And then to test it later with Javascript and append it to the head if the div is visible:

    <script type="text/javascript">

    if ($('#bootstrapCssTest').is(':visible') === true) {
        $('<link href="/localcopy/css/bootstrap.css" rel="stylesheet" type="text/css" />').appendTo('head');
    }
</script>

score 1 · Answer 2 · answered Jan 03 '13 at 15:16

1

Would performing a jquery.Get() on the file work? Depending on the result, you would know whether it's available or not. And seeing as it occurs on the clientside, local caching would make this a non-issue for the extra bandwidth.

answered Jan 03 '13 at 15:16

Kippie

3,760
3
23
38

score 1 · Answer 3 · answered Aug 13 '13 at 18:51

This gist has a code snippet that I found particularly useful for detecting the need to load a CSS fallback.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />

<script type="text/javascript">
    function cssLoaded(href) {
        var cssFound = false;

        for (var i = 0; i < document.styleSheets.length; i++) {
            var sheet = document.styleSheets[i];
            if (sheet['href'].indexOf(href) >= 0 && sheet['cssRules'].length > 0) {
                cssFound = true;
            }
        };

        return cssFound;
    }

    if (!cssLoaded('bootstrap-combined.min.css')) {
        local_bootstrap = document.createElement('link');
        local_bootstrap.setAttribute("rel", "stylesheet");
        local_bootstrap.setAttribute("type", "text/css");
        local_bootstrap.setAttribute("href", "/Content/Styles/bootstrap-combined.min.css");
        document.getElementsByTagName("head")[0].appendChild(local_bootstrap);
    }
</script>

just replace /Content/Styles/bootstrap-combined.min.css with the correct path to your local css and you should be good

Using `sheet['cssRules']` for a CSS file from another domain is cross-domain access, which is considered a security issue. Chrome does not allow it, and Firebug throws an error. — Victor Lyuboslavsky, Jan 21 '14 at 14:42

score 0 · Answer 4 · answered Mar 28 '14 at 11:05

Try this,

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script>
    function cssLoaded(href) {
        var cssFound = false;
        for (var i = 0; i < document.styleSheets.length; i++) {
            var sheet = document.styleSheets[i];
            if (
            sheet['href'] == "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" ||
            sheet['href'] == "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css") {
                cssFound = true;
            }
        };
        return cssFound;
    }
    if (!cssLoaded('bootstrap.min.css')) {
        local_bootstrap = new CustomEvent('link');
        local_bootstrap.setAttribute("rel", "stylesheet");
        local_bootstrap.setAttribute("href", "/css/bootstrap.min.css");
        document.getElementsByTagName("head")[0].appendChild(local_bootstrap);
    }
</script>

Source

How to load local copy of bootstrap css when the cdn server is down?

4 Answers4

Linked