Usando Bootstrap como módulo §

---

O Bootstrap fornece uma versão específica construída como ESM (ECMAScript Modules), apresentando arquivos denominados bootstrap.esm.js e bootstrap.esm.min.js. Esses arquivos permitem que você importe módulos específicos do Bootstrap em seu código, o que é particularmente útil se o ambiente do seu navegador suportar módulos ECMAScript.

Aqui está um exemplo de como você pode utilizar o Bootstrap como um módulo em seu código HTML:

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'
 
  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Neste exemplo, estamos importando o módulo Toast do arquivo bootstrap.esm.min.js e, em seguida, inicializando o Toast para cada elemento do DOM com a classe .toast. Isso demonstra como o Bootstrap como módulo permite que você use apenas os componentes específicos necessários para o seu projeto.

Atenção

Alguns plugins do Bootstrap, como Dropdown, Tooltip e Popover, podem apresentar limitações quando usados em conjunto com a tag <script> de tipo módulo. Isso ocorre devido a dependências desses plugins no Popper.

Referências §

---

• Using Bootstrap as a module