```
</details>
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element.
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Floating UI](https://floating-ui.com/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element.
## Bugs and feature requests
link: components/offcanvas/
- name: Popover
- description: Create custom overlays. Built on Popper.
+ description: Create custom overlays. Built on Floating UI.
link: components/popovers/
- name: Scrollspy
link: components/toggler/
- name: Tooltip
- description: Replace browser tooltips with custom ones. Built on Popper.
+ description: Replace browser tooltips with custom ones. Built on Floating UI.
link: components/tooltips/
-Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered.
+Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Floating UI will replace it automatically with `data-bs-title` when the element is rendered.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
-Dropdowns are built on a third party library, [Floating UI](https://floating-ui.com/), which provides dynamic positioning and viewport detection. Be sure to include [floating-ui.dom.umd.min.js]([[config:cdn.floating_ui]]) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Floating UI. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
+Dropdowns are built on a third party library, [Floating UI](https://floating-ui.com/), which provides dynamic positioning and viewport detection. Be sure to include [floating-ui.dom.umd.min.js]([[config:cdn.floating_ui]]) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Floating UI. Floating UI isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
## Examples
## Lean JavaScript
-Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript.
+Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Floating UI) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript.
For instance, assuming you’re using your own JavaScript bundler like Webpack, Parcel, or Vite, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our dialog JavaScript:
// import 'bootstrap/js/dist/tooltip';
```
-This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.
+This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Floating UI dependency in your `package.json` file.
<Callout>
**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:
- Compiled and minified CSS bundles
- Compiled and minified JavaScript plugins
-This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.
+This doesn’t include documentation, source files, or any optional JavaScript dependencies like Floating UI.
<a href="[[config:download.dist]]" class="btn btn-bd-primary">Download</a>
<script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
```
-If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Popper before our JS, via a CDN preferably.
+If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Floating UI before our JS, via a CDN preferably.
```html
<script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
<script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
```
-If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Popper before our JS, via a CDN preferably.
+If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Floating UI before our JS, via a CDN preferably.
```html
<script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
| File type | URL |
| --- | --- |
| CSS | [`[[config:cdn.css]]`]([[config:cdn.css]]) |
-| JS (with Popper) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) |
+| JS (with Floating UI) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) |
</BsTable>
### Using CDNs
<BsTable>
| Type | Description | Link |
| --- | --- | --- |
-| <strong class="text-nowrap">Distribution files</strong> | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like
Popper. | <a href="[[config:download.dist]]" class="btn btn-subtle theme-accent">Download</a> |
+| <strong class="text-nowrap">Distribution files</strong> | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like
Floating UI. | <a href="[[config:download.dist]]" class="btn btn-subtle theme-accent">Download</a> |
| <strong class="text-nowrap">Source files</strong> | Sass, JavaScript, and documentation files for compiling with your own asset pipeline. Requires [Sass compiler]([[docsref:/guides/contribute#sass]]), [Autoprefixer](https://github.com/postcss/autoprefixer), and a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). | <a href="[[config:download.source]]" class="btn btn-subtle theme-accent">Download</a> |
</BsTable>
## JS components
-Curious which components explicitly require our JavaScript and Popper?
+Curious which components explicitly require our JavaScript and Floating UI?
- Accordions for extending our Collapse plugin
- Alerts for dismissing
</script>
```
-Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Popper dependency, which imports Popper into our JavaScript like so:
+Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Floating UI dependency, which imports Floating UI into our JavaScript like so:
```js
import * as Popper from "@floating-ui/dom"
Uncaught TypeError: Failed to resolve module specifier "@floating-ui/dom". Relative references must start with either "/", "./", or "../".
```
-To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap and Popper:
+To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap and Floating UI:
```html
<!doctype html>
<!-- Optional JavaScript; choose one of the two! -->
- <!-- Option 1: Bootstrap Bundle with Popper -->
+ <!-- Option 1: Bootstrap Bundle with Floating UI -->
<script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
- <!-- Option 2: Separate Popper and Bootstrap JS -->
+ <!-- Option 2: Separate Floating UI and Bootstrap JS -->
<!--
<script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
<script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
npm init -y
```
-2. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.
+2. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
```sh
- npm i --save bootstrap @popperjs/core
+ npm i --save bootstrap @floating-ui/dom
```
3. **Install additional dependencies.** In addition to Vite and Bootstrap, we have some dependencies used to import and bundle Bootstrap’s CSS. Sass compiles our source `.scss` files into CSS and then Autoprefixer and PostCSS handle browser compatibility. We install the `postcss-cli` package so we can work with PostCSS via CLI.
npm i --save-dev parcel
```
-3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
```sh
- npm i --save bootstrap @popperjs/core
+ npm i --save bootstrap @floating-ui/dom
```
Now that we have all the necessary dependencies installed, we can get to work creating the project files and importing Bootstrap.
}
```
-2. **Import Bootstrap’s JS.** Add the following to `src/js/main.js` to import all of Bootstrap’s JS. Popper will be imported automatically through Bootstrap.
+2. **Import Bootstrap’s JS.** Add the following to `src/js/main.js` to import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap.
```js
// Import all of Bootstrap’s JS
</html>
```
-2. **Include Bootstrap’s CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about [our CDN links]([[docsref:/getting-started/install#cdn]]).
+2. **Include Bootstrap’s CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Floating UI for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about [our CDN links]([[docsref:/getting-started/install#cdn]]).
```html
<!doctype html>
</html>
```
- You can also include [Floating UI](https://floating-ui.com/) and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
+ You can also include [Floating UI](https://floating-ui.com/) and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Floating UI.
```html
<script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
npm i --save-dev vite
```
-3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
```sh
- npm i --save bootstrap @popperjs/core
+ npm i --save bootstrap @floating-ui/dom
```
4. **Install additional dependency.** In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap’s CSS.
*You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
-2. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Popper will be imported automatically through Bootstrap.
+2. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap.
```js
// Import our custom CSS
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
```
-3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
```sh
- npm i --save bootstrap @popperjs/core
+ npm i --save bootstrap @floating-ui/dom
```
4. **Install additional dependencies.** In addition to Webpack and Bootstrap, we need a few more dependencies to properly import and bundle Bootstrap’s CSS and JS with Webpack. These include Sass, some loaders, and Autoprefixer.
*You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
-3. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Popper will be imported automatically through Bootstrap.
+3. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap.
```js
// Import our custom CSS
---
title: Migrating to v6
-description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
+description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v5 to v6.
aliases: "/migration/"
toc: true
---
- **Updated lg, xl, and 2xl breakpoints and containers.**
- Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
- Increased the `xl` breakpoint from 1200px to 1280px, and it's container from 1140px to 1200px.
- - Renamed `2xl` to `2xl` for better scaling with additional custom breakpoints
+ - Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
- Increased the `2xl` breakpoint from 1400px to 1536px, and it's container from 1320px to 1440px.
### Sass
- Removed `muted`, `black-50`, and `white-50` from text colors utilities map
- Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
- Removed `$btn-close-white-filter` for `$btn-close-filter-dark`.
- - Removed `$border-radius-2xl`, use `$border-radius-2xl`.
+ - Removed `$border-radius-xxl`, use `$border-radius-2xl`.
- Removed `$text-muted` for secondary color.
- Removed `$hr-bg-color` for `$hr-border-color` and `$hr-height` for `$hr-border-width`.
- Removed unused `$dropdown-header-padding` for the `-x`/`-y` split variables.
projects / thirdparty / bootstrap.git / commitdiff
