add docs about how to use the esm version

diff --git a/site/docs/4.3/getting-started/contents.md b/site/docs/4.3/getting-started/contents.md
index 1809fa34d5f3e4efa217fe3a489d854c19b1aea6..efaee638cc85c8bbd99d4732d127b218d35ca229 100644 (file)
--- a/site/docs/4.3/getting-started/contents.md
+++ b/site/docs/4.3/getting-started/contents.md
@@ -32,6 +32,10 @@ bootstrap/
     ├── bootstrap.bundle.js.map
     ├── bootstrap.bundle.min.js
     ├── bootstrap.bundle.min.js.map
+    ├── bootstrap.esm.js
+    ├── bootstrap.esm.js.map
+    ├── bootstrap.esm.min.js
+    ├── bootstrap.esm.min.js.map
     ├── bootstrap.js
     ├── bootstrap.js.map
     ├── bootstrap.min.js

diff --git a/site/docs/4.3/getting-started/introduction.md b/site/docs/4.3/getting-started/introduction.md
index 49602f3603825aa62b5cfdf5e1d2f0c231041b60..08363687c9ae7f00dbe364a38ce0f8c0189e9ce4 100644 (file)
--- a/site/docs/4.3/getting-started/introduction.md
+++ b/site/docs/4.3/getting-started/introduction.md
@@ -33,6 +33,8 @@ Many of our components require the use of JavaScript to function. Specifically,
 <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}
 
+If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module) section.
+
 Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
 
 Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section.

diff --git a/site/docs/4.3/getting-started/javascript.md b/site/docs/4.3/getting-started/javascript.md
index 5659f6f936afd8e2bfaa77bd78bb80cb00befdb7..bf9ebfe6330bd87ca9d7173380c23f6939db0fe2 100644 (file)
--- 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.