aboutsummaryrefslogtreecommitdiff
path: root/site/docs/4.3/getting-started/javascript.md
diff options
context:
space:
mode:
authorJohann-S <[email protected]>2019-03-03 12:01:29 +0200
committerXhmikosR <[email protected]>2019-03-11 17:59:08 +0200
commitba9caacaa588cca41af9a899bca8a1020f784f18 (patch)
treeadabd646104f3acf48778d3ac4a7affe2d93f81f /site/docs/4.3/getting-started/javascript.md
parente8684b55b8622473eca18b89d52cd1bc38bc7ef2 (diff)
downloadbootstrap-ba9caacaa588cca41af9a899bca8a1020f784f18.tar.xz
bootstrap-ba9caacaa588cca41af9a899bca8a1020f784f18.zip
add docs about how to use the esm version
Diffstat (limited to 'site/docs/4.3/getting-started/javascript.md')
-rw-r--r--site/docs/4.3/getting-started/javascript.md20
1 files changed, 20 insertions, 0 deletions
diff --git a/site/docs/4.3/getting-started/javascript.md b/site/docs/4.3/getting-started/javascript.md
index 5659f6f93..bf9ebfe63 100644
--- a/site/docs/4.3/getting-started/javascript.md
+++ b/site/docs/4.3/getting-started/javascript.md
@@ -12,6 +12,26 @@ Plugins can be included individually (using Bootstrap's individual `js/dist/*.js
If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files which are UMD ready.
+## 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/#feat=es6-module).
+
+{% highlight html %}
+<script type="module">
+ import { Toast } from 'bootstrap.esm.min.js'
+
+ Array.from(document.querySelectorAll('.toast'))
+ .forEach(toastNode => new Toast(toastNode))
+</script>
+{% endhighlight %}
+
+{% capture callout %}
+## Incompatible plugins
+
+Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a `<script>` tag with `module` type because they depend on Popper.js. For more information about the issue see [here](https://developers.google.com/web/fundamentals/primers/modules#specifiers).
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
+
## Dependencies
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.