diff --git a/.cspell.json b/.cspell.json index 8562645cfe90..25b3e307a4f7 100644 --- a/.cspell.json +++ b/.cspell.json @@ -48,6 +48,7 @@ "Hoverable", "hreflang", "hstack", + "importmap", "jsdelivr", "Jumpstart", "keyframes", diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md index 8ee4289211b8..20c81120a8af 100644 --- a/site/content/docs/5.1/getting-started/javascript.md +++ b/site/content/docs/5.1/getting-started/javascript.md @@ -14,7 +14,11 @@ If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files whi ## Using Bootstrap as a module -We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/es6-module). +{{< callout >}} +**Try it yourself!** Download the source code and working demo for using Bootstrap as an ES module from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/sass-js-esm). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/sass-js-esm?file=index.html). +{{< /callout >}} + +We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in the browser, if your [targeted browsers support it](https://caniuse.com/es6-module). ```html ``` -{{< callout warning >}} -## Incompatible plugins +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. This is further complicated by our Popper dependency, which imports Popper like so: -Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a ` + + + + +``` ## Dependencies