From ba9caacaa588cca41af9a899bca8a1020f784f18 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Sun, 3 Mar 2019 12:01:29 +0200
Subject: [PATCH] add docs about how to use the esm version

---
 site/docs/4.3/getting-started/contents.md     |  4 ++++
 site/docs/4.3/getting-started/introduction.md |  2 ++
 site/docs/4.3/getting-started/javascript.md   | 20 +++++++++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/site/docs/4.3/getting-started/contents.md b/site/docs/4.3/getting-started/contents.md
index 1809fa34d5..efaee638cc 100644
--- 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 49602f3603..08363687c9 100644
--- 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 5659f6f936..bf9ebfe633 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.