diff options
author | Sam Magura <srmagura@gmail.com> | 2022-04-29 23:38:30 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-29 23:38:30 +0300 |
commit | ebb1f485d3e750a67ac7633e5044f2fce0749afe (patch) | |
tree | 8e0570076e85eedfa51c1bf0e46d0e8ac0752821 /site | |
parent | 544cf8df48de281aafb5ae0615b9bc9fd75ed4f8 (diff) |
Document incompatibilities between Bootstrap JS and React/.etc (#36217)
* Document incompatibilities between Bootstrap JS and React/.etc
Closes #35665.
* Remove link to reactstrap
* Update javascript.md
Co-authored-by: Mark Otto <otto@github.com>
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/5.1/getting-started/javascript.md | 10 |
1 files changed, 10 insertions, 0 deletions
diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md index 5e43210344..b4d8cbff1f 100644 --- a/site/content/docs/5.1/getting-started/javascript.md +++ b/site/content/docs/5.1/getting-started/javascript.md @@ -12,6 +12,16 @@ 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. +## Usage with JavaScript frameworks + +While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScript is not fully compatible with frameworks like React, Vue, and Angular** which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the "open" position. + +A better alternative for those using React and similar frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options: + +- React: [react-bootstrap](https://react-bootstrap.github.io/) +- Vue: [BootstrapVue](https://bootstrap-vue.org/) +- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) + ## 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). |