Docs: add warning callout to add a workaround when jsDelivr is not available

[julien-deramond]

Description

We use (and advise to use) jsDelivr when using the CDN version of Bootstrap.

However, recently, in https://github.com/orgs/twbs/discussions/39143 or https://github.com/orgs/twbs/discussions/38782 (if I remember well, other discussions exist as well), it seems like jsDelivr is not available in some countries (might be blocked).

So this PR suggests adding a warning callout to explain it and provides a workaround with cdnjs pr unpkg which seem to be reliable resources as well.

As mentioned in the comments, cdnjs Bootstrap page provides a ready-to-use snippet that can be really a handful for folks.

Type of changes

• Enhancement (non-breaking change which adds functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-39145--twbs-bootstrap.netlify.app/docs/5.3/getting-started/download/#cdn-via-jsdelivr

Related discussions

• https://github.com/orgs/twbs/discussions/39143
• https://github.com/orgs/twbs/discussions/38782

[iiAhmedYT]

As well as cdnjs (https://cdnjs.com/)
I'm in Egypt which is one of those countries where jsDelivr is blocked which is VERY annoying, i switched to cdnjs which is crazy fast, i love it

[julien-deramond]

Yep the 3 that I've often found are jsDelivr, unpkg, and cdnjs. I can maybe mention it as well if it can be useful for folks stuck with this issue.

[coliff]

One problem with this callout is that if a user were to do as it says and copy the code above the callout:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-yvuw7Qka5HyIDWlQLof1Eh7TsntO8T9n5xVQ2fLEK8UEb47oC0LAx6N9KUadRsT8" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-AN46EzEu8aYMuLb9XLkZgyvOCua6xS1HKstfL9xcOyx+UKZYcp2Z58pZjezzj/Qc" crossorigin="anonymous"></script>

...And replace https://cdn.jsdelivr.net/npm/ with https://unpkg.com/ then the links wouldn't work because the SRI appears to be different.

Quick test: https://stackblitz.com/edit/bootstrap-cdn-test?file=index.html

Maybe link to this page as an alternative CDN instead: https://cdnjs.com/libraries/bootstrap ?

[julien-deramond]

Yeah @coliff the integrity value must be changed to <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" integrity_no="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> for example for this file. Integrity value can be generated via https://www.srihash.org/ but it's not really user-friendly I suppose (and missing in my warning callout message).

Might be worth pointing to https://cdnjs.com/libraries/bootstrap instead as you said which offers a "Copy Script Tag".

Changing back this PR to draft mode and I'll do the modification later on.

[julien-deramond]

Based on your comments, I've refined this warning callout message. Don't hesitate to suggest some modifications if the content is not clear/helpful.

[mdo]

Let's not make this a callout. Added a suggested edit to add before merging.