Should I use Bootstrap from CDN or make a copy on my server?

Twitter Bootstrap Problem Overview

What's the best practice of using Twitter Bootstrap, refer to it from CDN or make a local copy on my server?

Since Bootstrap keeps evolving, I am afraid if I refer to the CDN, the user would see different webpages over time, and some tags may even broken. What's most people's choice?

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

[Why Not Both ¯\(ツ)/¯ ?][PorQueNoLosDos] Scott Hanselman has a great article on using a CDN for performance gains but gracefully [falling back to a local copy in case the CDN is down][fallback].

Specific to bootstrap, you can do the following to [load from a CDN with a local fallback][bootstrapping bootstrap]:

[Working Demo in Plunker][demo]

<head>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
  <!-- Bootstrap CSS local fallback -->
  <script>
    var test = document.createElement("div")
    test.className = "hidden d-none"

    document.head.appendChild(test)
    var cssLoaded = window.getComputedStyle(test).display === "none"
    document.head.removeChild(test)

    if (!cssLoaded) {
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = "lib/bootstrap.min.css";

        document.head.appendChild(link);
    }
  </script>
</head>
<body>
    <!-- APP CONTENT -->
   
    <!-- jQuery CDN -->
    <script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- jQuery local fallback -->
    <script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>

    <!-- Bootstrap JS CDN -->
    <script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap JS local fallback -->
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>

Updates

you can also do the same test using YepNope or fallback.js
per Flash's comment and this solution, updated answer to check for .visible class instead of testing for rgb(51, 51, 51)
per deste's comment, updated to use .hidden and .d-none for either Boostrap 3.x or 4
when testing if a stylesheet loaded, you have to look for a style that would have been applied, create an element, and see if it has been applied.
Updated the stylesheet to load immediately in the head by using vanilla js. You need to create a test element using Document.createElement(), apply bootstrap classes, use Window.getComputedStyle() to test for display:none, and then conditionally insert a stylesheet using js.

Best Practices

To your question on Best Practices, there are a lot of very good reasons to use a CDN in a production environment:

> 1. It increases the parallelism available. 2. It increases the chance that there will be a cache-hit.

It ensures that the payload will be as small as possible.
It reduces the amount of bandwidth used by your server.
It ensures that the user will get a geographically close response.

To your versioning concern, any CDN worth its weight in salt with let you target a specific version of the library so you don't accidentally introduce breaking changes with each release.

Using `document.write`

According to the mdn on document.write

> Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.

However, the usage here is intentional. The code needs to be executed before the DOM is fully loaded and also in the correct order. If jQuery fails, we need to inject it into the document inline before we attempt to load bootstrap, which relies on jQuery.

HTML Output After Load:

In both of these instances though, we're calling while the document is still open so it should inline the contents, rather than replacing the entire document. If you're waiting till the end, you'll have to replace with document.body.appendChild to insert dynamic sources.

> Aside: In MVC 6, you can do this with link and script tag helpers

[PorQueNoLosDos]: http://i.imgur.com/MeVUiFa.png "¿por qué no los dos?" [fallback]: http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx [demo]: http://next.plnkr.co/edit/rZQifsC11eDmQTGe?preview [bootstrapping bootstrap]: https://gist.github.com/mojaray2k/5097131

Solution 2 - Twitter Bootstrap

Depends on the specific site.

Do you have many users? Do you care about bandwidth usage? Is performance an issue (CDN's can speed up the responses) ?

You can link to a specific version:

> //maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Or > //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

That way you don't have to worry about library updates, its a better practice to keep updated.

I am not sure what are the exact statistics about developers choice, but you can have a look here and see Billions of requests are sent to Bootstrap CDN, which means it is robust and safe to use.

Solution 3 - Twitter Bootstrap

Almost all public CDNs are pretty reliable. However, if you are worried about that fraction of the time when a CDN might be down, you can load Bootstrap from one Bootstrap CDN, and fallback to an alternative CDN in case the first one is down.

<html>
  <head>
    <!-- Bootstrap CSS CDN with Fallback -->
    <link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous">
    <script>
    var test = document.createElement("div")
    test.className = "hidden d-none"
    
    document.head.appendChild(test)
    var cssLoaded = window.getComputedStyle(test).display === "none"
    document.head.removeChild(test)
    
    if (!cssLoaded) {
        var link = document.createElement("link");
        
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";
        
        document.head.appendChild(link);
    }
    </script>
  </head>
  <body>
    <!-- APP CONTENT -->
    
    <!-- jQuery CDN with Fallback -->
    <script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script>
    
    <!-- Bootstrap JS CDN with Fallback -->
    <script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script>
  </body>
</html>

About your second concern: The links in this post are hard coded versions of bootstrap and jquery. So, even if the bootstrap and jquery libraries are constantly developed and get new features, your site will stay the same over time.

Solution 4 - Twitter Bootstrap

I tried to edit the KyleMit's answer but the forum was marking as a wrong indented code, even it wasn't, so I'm adding my contribution right bellow:

As the question is tagged as a [tag:twitter-bootstrap] topic (and not only [tag:twitter-bootstrap-3] ), maybe it's helpful to update the response for the newer version of Bootstrap.

As the framework added a new class for hiding elements on its fourth version, we should use .d-none instead of .hidden in this case.

Everything else remains the same on that case, except the lib version (of course!)

Solution 5 - Twitter Bootstrap

Thanks to @KyleMit. Another way of fall back is using 'window' object as under -

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
</script>

It works like this - If the CDN link works, 'window' object will have 'jQuery' property available else the second part of the script i.e. document.write will get executed which points to the local copy.

Answer to original question - Having CDN has many benefits such as quick downloads without impacting your server and bandwidth. Having a local copy has its own benefit (as a fall back arrangements). On intranet, due to proxy settings, security policies, CDN link may not work or if CDN link is down it may not work. The straight answer is to have both.

Content Type	Original Author	Original Content on Stackoverflow
Question	shapeare	View Question on Stackoverflow
Solution 1 - Twitter Bootstrap	KyleMit	View Answer on Stackoverflow
Solution 2 - Twitter Bootstrap	Ofiris	View Answer on Stackoverflow
Solution 3 - Twitter Bootstrap	Hamid Sarfraz	View Answer on Stackoverflow
Solution 4 - Twitter Bootstrap	André C. Rocha	View Answer on Stackoverflow
Solution 5 - Twitter Bootstrap	Anand	View Answer on Stackoverflow

Should I use Bootstrap from CDN or make a copy on my server?

Twitter Bootstrap Problem Overview

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

[Working Demo in Plunker][demo]

Updates

Best Practices

Using `document.write`

Solution 2 - Twitter Bootstrap

Solution 3 - Twitter Bootstrap

Solution 4 - Twitter Bootstrap

Solution 5 - Twitter Bootstrap

ReactJS call parent method

Postman: sending nested JSON object

Attributions

Twitter Bootstrap Problem Overview

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

[Working Demo in Plunker][demo]

Updates

Best Practices

Using document.write

Solution 2 - Twitter Bootstrap

Solution 3 - Twitter Bootstrap

Solution 4 - Twitter Bootstrap

Solution 5 - Twitter Bootstrap

ReactJS call parent method

Postman: sending nested JSON object

Attributions

Using `document.write`