Click the accordions below to expand/collapse the accordion content. Each `<details>` element shares the same `name` attribute value, creating an exclusive accordion where opening one item automatically closes the others.
-To render an accordion that's expanded by default, add the `open` attribute to the `<details>` element.
+To render an accordion that’s expanded by default, add the `open` attribute to the `<details>` element.
<Example code={`<div class="accordion">
<details class="accordion-item" name="accordionExample" open>
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the first item's accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
+ <strong>This is the first item’s accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
</div>
</details>
<details class="accordion-item" name="accordionExample">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the second item's accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
+ <strong>This is the second item’s accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
</div>
</details>
<details class="accordion-item" name="accordionExample">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the third item's accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
+ <strong>This is the third item’s accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
</div>
</details>
</div>`} />
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the first item's accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
+ <strong>This is the first item’s accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
</div>
</details>
<details class="accordion-item" name="accordionExampleTheme">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the second item's accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
+ <strong>This is the second item’s accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
</div>
</details>
<details class="accordion-item" name="accordionExampleTheme">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the third item's accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
+ <strong>This is the third item’s accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
</div>
</details>
</div>`} />
Accordion Item #1
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
- <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
+ <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.</div>
</details>
<details class="accordion-item" name="accordionFlushExample">
<summary class="accordion-header">
Accordion Item #2
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
- <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
+ <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.</div>
</details>
<details class="accordion-item" name="accordionFlushExample">
<summary class="accordion-header">
Accordion Item #3
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
- <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
+ <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</details>
</div>`} />
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the first item's accordion body.</strong> Without the <code>name</code> attribute, each accordion item operates independently. You can open multiple items at the same time.
+ <strong>This is the first item’s accordion body.</strong> Without the <code>name</code> attribute, each accordion item operates independently. You can open multiple items at the same time.
</div>
</details>
<details class="accordion-item">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the second item's accordion body.</strong> Opening this won't close the first item because there's no <code>name</code> attribute linking them together.
+ <strong>This is the second item’s accordion body.</strong> Opening this won’t close the first item because there’s no <code>name</code> attribute linking them together.
</div>
</details>
<details class="accordion-item">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the third item's accordion body.</strong> Each item is completely independent—open or close them in any combination you like.
+ <strong>This is the third item’s accordion body.</strong> Each item is completely independent—open or close them in any combination you like.
</div>
</details>
</div>`} />
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the first item's accordion body.</strong> It contains a nested accordion below.
+ <strong>This is the first item’s accordion body.</strong> It contains a nested accordion below.
<div class="accordion mt-3">
<details class="accordion-item" name="accordionNestedInner" open>
<summary class="accordion-header">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the second item's accordion body.</strong> It does not contain a nested accordion.
+ <strong>This is the second item’s accordion body.</strong> It does not contain a nested accordion.
</div>
</details>
<details class="accordion-item" name="accordionNested">
<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
</summary>
<div class="accordion-body">
- <strong>This is the third item's accordion body.</strong> It does not contain a nested accordion.
+ <strong>This is the third item’s accordion body.</strong> It does not contain a nested accordion.
</div>
</details>
</div>`} />
### Image
-Use `.avatar` with an `.avatar-img` for image-based avatars. The parent `.avatar` element provides an easy wrapper for additional avatar features like status indicators and stacks. You're welcome to use the `.avatar-img` class on its own if you only need a single HTML element.
+Use `.avatar` with an `.avatar-img` for image-based avatars. The parent `.avatar` element provides an easy wrapper for additional avatar features like status indicators and stacks. You’re welcome to use the `.avatar-img` class on its own if you only need a single HTML element.
<Example code={`<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
## Accessibility
-Since breadcrumbs provide navigation, it's important to follow these practices:
+Since breadcrumbs provide navigation, it’s important to follow these practices:
- Add `aria-label="breadcrumb"` to the `<nav>` element to describe the navigation type
- Add `aria-current="page"` to the `.breadcrumb-item` containing the current page
</div>
</div>`} />
-Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
+Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
<Example class="d-flex gap-3 flex-column" code={`<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<Example code={`<a class="btn-solid theme-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn-solid theme-secondary disabled" role="button" aria-disabled="true">Link</a>`} />
-If there's an `href` attribute, add `tabindex="-1"` and `aria-disabled="true"` to prevent keyboard focus and assistive technologies from interacting with the link.
+If there’s an `href` attribute, add `tabindex="-1"` and `aria-disabled="true"` to prevent keyboard focus and assistive technologies from interacting with the link.
<Example code={`<a href="#" class="btn-solid theme-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn-solid theme-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>`} />
#### Variants
-Button variants are defined in the `$button-variants` Sass map. Each variant specifies which theme color tokens to use for its base, hover, and active states. The map uses token names (like `"bg"`, `"contrast"`, `"border"`) that reference the current theme's color palette.
+Button variants are defined in the `$button-variants` Sass map. Each variant specifies which theme color tokens to use for its base, hover, and active states. The map uses token names (like `"bg"`, `"contrast"`, `"border"`) that reference the current theme’s color palette.
<ScssDocs name="btn-variants" file="scss/buttons/_button.scss" />
);
```
-To remove a variant you don't need, use Sass's `map.remove()`:
+To remove a variant you don’t need, use Sass’s `map.remove()`:
```scss
@use "sass:map";
## How it works
-The Dialog component leverages the browser's native `<dialog>` element, providing built-in accessibility features, focus management, and backdrop handling without the complexity of custom implementations.
+The Dialog component leverages the browser’s native `<dialog>` element, providing built-in accessibility features, focus management, and backdrop handling without the complexity of custom implementations.
Key features of the native dialog:
-- **Modal or inline** via `showModal()` / `show()` — `modal: true` (default) promotes the dialog to the browser's top layer with a backdrop and focus trapping; `modal: false` renders it inline.
+- **Modal or inline** via `showModal()` / `show()` — `modal: true` (default) promotes the dialog to the browser’s top layer with a backdrop and focus trapping; `modal: false` renders it inline.
- **Built-in backdrop** using the `::backdrop` pseudo-element (modal only); set `backdrop: "static"` to lock clicks outside, or `backdrop: false` to hide it.
- **Escape key handling** closes the dialog by default; set `keyboard: false` to disable.
- **Accessibility** — focus is trapped inside modal dialogs and returned to the trigger on close, with native `<dialog>` ARIA semantics.
<CloseButton dismiss="dialog" />
</div>
<div class="dialog-body">
- <p>This is a native dialog element. It uses the browser's built-in modal behavior for accessibility and focus management.</p>
+ <p>This is a native dialog element. It uses the browser’s built-in modal behavior for accessibility and focus management.</p>
</div>
<div class="dialog-footer">
<button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
<CloseButton dismiss="dialog" />
</div>
<div class="dialog-body">
- <p>This is a native dialog element, only it’s set to dark mode. It uses the browser's built-in modal behavior for accessibility and focus management.</p>
+ <p>This is a native dialog element, only it’s set to dark mode. It uses the browser’s built-in modal behavior for accessibility and focus management.</p>
</div>
<div class="dialog-footer">
<button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
## Overlays
-Tooltips, popovers, and toasts all work inside dialogs, but require some extra care. Since dialogs render in the browser's top layer, overlays appended to `<body>` will appear behind the dialog. Set `data-bs-container` to the dialog element so tooltips and popovers render inside it. Toasts already work as long as they're placed in the dialog markup.
+Tooltips, popovers, and toasts all work inside dialogs, but require some extra care. Since dialogs render in the browser’s top layer, overlays appended to `<body>` will appear behind the dialog. Set `data-bs-container` to the dialog element so tooltips and popovers render inside it. Toasts already work as long as they’re placed in the dialog markup.
-Tooltips, popovers, toasts, and menus all work inside modal dialogs. Modal dialogs use `showModal()`, which promotes the dialog to the browser's top layer -- a special rendering layer above everything else on the page.
+Tooltips, popovers, toasts, and menus all work inside modal dialogs. Modal dialogs use `showModal()`, which promotes the dialog to the browser’s top layer -- a special rendering layer above everything else on the page.
<Example code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#dialogWithComponents">
Open dialog
<CloseButton dismiss="dialog" />
</div>
<div class="dialog-body">
- <p>This is some placeholder content to show the scrolling behavior for dialogs. We use repeated line breaks to demonstrate how content can exceed the dialog's inner height, showing scrolling within the body while the header and footer remain fixed.</p>
+ <p>This is some placeholder content to show the scrolling behavior for dialogs. We use repeated line breaks to demonstrate how content can exceed the dialog’s inner height, showing scrolling within the body while the header and footer remain fixed.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
By default, dialogs open as modals using the browser-native `showModal()` method. You can also open dialogs as non-modal using `show()` by setting `modal` to `false`. Non-modal dialogs:
- Have no backdrop
-- Don't trap focus
-- Don't block interaction with the rest of the page
-- Don't render in the browser's top layer
+- Don’t trap focus
+- Don’t block interaction with the rest of the page
+- Don’t render in the browser’s top layer
- Still respond to Escape key (if `keyboard: true`)
<Example code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false"><!-- [!code highlight] -->
<CloseButton dismiss="dialog" />
</div>
<div class="dialog-body">
- <p>This dialog doesn't block the page. You can still interact with content behind it.</p>
+ <p>This dialog doesn’t block the page. You can still interact with content behind it.</p>
</div>
<div class="dialog-footer">
<button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
<BsTable>
| Name | Type | Default | Description |
| --- | --- | --- | --- |
-| `backdrop` | boolean or `'static'` | `true` | For modal dialogs, clicking the backdrop dismisses the dialog. Specify `static` for a backdrop which doesn't close the dialog when clicked. Has no effect on non-modal dialogs. |
+| `backdrop` | boolean or `'static'` | `true` | For modal dialogs, clicking the backdrop dismisses the dialog. Specify `static` for a backdrop which doesn’t close the dialog when clicked. Has no effect on non-modal dialogs. |
| `keyboard` | boolean | `true` | Closes the dialog when escape key is pressed. |
| `modal` | boolean | `true` | When `true`, opens the dialog as a modal using `showModal()` with backdrop, focus trapping, and top layer rendering. When `false`, opens as a non-modal dialog using `show()` without backdrop or focus trapping. |
</BsTable>
| `hide` | Hides the dialog. **Returns to the caller before the dialog has actually been hidden** (i.e. before the `hidden.bs.dialog` event occurs). |
| `toggle` | Toggles the dialog. **Returns to the caller before the dialog has actually been shown or hidden** (i.e. before the `shown.bs.dialog` or `hidden.bs.dialog` event occurs). |
| `handleUpdate` | Provided for API consistency with Modal. Native dialogs handle their own positioning. |
-| `dispose` | Destroys an element's dialog. |
+| `dispose` | Destroys an element’s dialog. |
| `getInstance` | Static method which allows you to get the dialog instance associated with a DOM element. |
-| `getOrCreateInstance` | Static method which allows you to get the dialog instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `getOrCreateInstance` | Static method which allows you to get the dialog instance associated with a DOM element, or create a new one in case it wasn’t initialized. |
</BsTable>
### Events
-Bootstrap's dialog class exposes a few events for hooking into dialog functionality.
+Bootstrap’s dialog class exposes a few events for hooking into dialog functionality.
<BsTable>
| Event | Description |
Drawer builds on the native `<dialog>` element and our Dialog component to manage hidden sidebars via JavaScript. These sidebars, or drawers, can appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
- **Drawer shares the same base as [our Dialog component]([[docsref:/components/dialog]])**, using native `<dialog>` APIs for focus trapping, backdrop, and top-layer rendering.
-- **Use the `<dialog>` element**, not a `<div>`. Due to how CSS handles animations, don't apply `margin` or `translate` directly to `.drawer` — wrap it if you need those.
+- **Use the `<dialog>` element**, not a `<div>`. Due to how CSS handles animations, don’t apply `margin` or `translate` directly to `.drawer` — wrap it if you need those.
- **Modal by default, or scroll-through** — the default opens the drawer modally with a backdrop; set `scroll: true` to render without a backdrop and without locking body scroll.
- **Built-in backdrop** via `::backdrop` (modal only) closes the drawer on click; set `backdrop: "static"` to lock clicks outside, or `backdrop: false` to hide it.
- **Escape key handling** closes the drawer by default; set `keyboard: false` to disable.
## Placement
-There's no default placement for drawer components, so you must add one of the modifier classes below.
+There’s no default placement for drawer components, so you must add one of the modifier classes below.
- `.drawer-start` places drawer on the left of the viewport (shown above)
- `.drawer-end` places drawer on the right of the viewport
## Overview
-Toggle menus with buttons whenever possible. Here's an example using a Bootstrap button:
+Toggle menus with buttons whenever possible. Here’s an example using a Bootstrap button:
<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="menu" aria-expanded="false">
Toggle menu
<a class="menu-item" href="#">Menu item 3</a>
</div>`} />
-Menus are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap menu JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
+Menus are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap menu JavaScript plugin. They’re toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
-Menus are built on a third party library, [Floating UI](https://floating-ui.com/), which provides dynamic positioning and viewport detection. Use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which includes Floating UI, or include Floating UI separately via an [import map]([[docsref:/getting-started/javascript#using-bootstrap-as-a-module]]). Floating UI isn't used to position menus in navbars though as dynamic positioning isn't required.
+Menus are built on a third party library, [Floating UI](https://floating-ui.com/), which provides dynamic positioning and viewport detection. Use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which includes Floating UI, or include Floating UI separately via an [import map]([[docsref:/getting-started/javascript#using-bootstrap-as-a-module]]). Floating UI isn’t used to position menus in navbars though as dynamic positioning isn’t required.
## Examples
-While `<button>` is the recommended control for a menu toggle, there might be situations where you have to use an `<a>` element. If you do, we recommend adding a `role="button"` attribute to appropriately convey control's purpose to assistive technologies such as screen readers.
+While `<button>` is the recommended control for a menu toggle, there might be situations where you have to use an `<a>` element. If you do, we recommend adding a `role="button"` attribute to appropriately convey control’s purpose to assistive technologies such as screen readers.
Use [button groups]([[docsref:/components/button-group]]) to create split button menus where the menu is displayed when a secondary button is clicked.
You can use `<a>` or `<button>` elements as menu items.
<Callout>
-We use utility classes to display menus in our docs examples, but they're not required for your own use.
+We use utility classes to display menus in our docs examples, but they’re not required for your own use.
</Callout>
<Example code={`<div class="menu show position-static">
### Text
-Place any freeform text within a menu with text and use [margin]([[docsref:/utilities/margin]]) and [padding]([[docsref:/utilities/padding]]) utilities. Note that you'll likely need additional sizing styles to constrain the menu width.
+Place any freeform text within a menu with text and use [margin]([[docsref:/utilities/margin]]) and [padding]([[docsref:/utilities/padding]]) utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
<Example code={`<div class="menu show position-static p-3 fg-2"
style="--bs-menu-min-width: 240px;">
<p>
- Some example text that's free-flowing within the menu.
+ Some example text that’s free-flowing within the menu.
</p>
<p class="mb-0">
And this is more example text.
### Nested
-Submenus can be nested to multiple levels. Each level opens to the side and flips direction when there's not enough viewport space.
+Submenus can be nested to multiple levels. Each level opens to the side and flips direction when there’s not enough viewport space.
<Example code={`<button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">
Multi-level menu
The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/TR/wai-aria/#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
-Bootstrap
's menus, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create menus that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.
+Bootstrap
’s menus, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create menus that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.
### Keyboard navigation
## Usage
-Via data attributes or JavaScript, the menu plugin toggles hidden content (menus) by toggling the `.show` class on the `.menu`. The `data-bs-toggle="menu"` attribute is relied on for closing menus at an application level, so it's a good idea to always use it.
+Via data attributes or JavaScript, the menu plugin toggles hidden content (menus) by toggling the `.show` class on the `.menu`. The `data-bs-toggle="menu"` attribute is relied on for closing menus at an application level, so it’s a good idea to always use it.
<Callout>
On touch-enabled devices, opening a menu adds empty `mouseover` handlers to the immediate children of the `<body>` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the menu from triggering the code that closes the menu. Once the menu is closed, these additional empty `mouseover` handlers are removed.
### Dependencies
-The menu plugin requires the following JavaScript files if you're building Bootstrap's JS from source:
+The menu plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:
<BsTable>
| File | Description |
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the menu: <ul class="my-2"><li>`true` - the menu will be closed by clicking outside or inside the menu.</li><li>`false` - the menu will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing <kbd>Esc</kbd> key)</li><li>`'inside'` - the menu will be closed (only) by clicking inside the menu.</li> <li>`'outside'` - the menu will be closed (only) by clicking outside the menu.</li></ul> Note: the menu can always be closed with the <kbd>Esc</kbd> key. |
-| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the menu (applies only to the shift middleware). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Floating UI's [shift docs](https://floating-ui.com/docs/shift). |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the menu (applies only to the shift middleware). By default it’s `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Floating UI’s [shift docs](https://floating-ui.com/docs/shift). |
| `container` | string, element, boolean | `false` | Appends the menu to a specific element when shown. Use `'body'` or `true` to append to the document body, which helps escape containers with `overflow: hidden`. The menu is moved back to its original position when hidden. |
| `display` | string | `'dynamic'` | By default, we use Floating UI for dynamic positioning. Disable this with `static`. |
-| `offset` | array, string, function | `[0, 2]` | Offset of the menu relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the placement, the reference, and floating rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding, distance]. For more information refer to Floating UI's [offset docs](https://floating-ui.com/docs/offset). |
-| `floatingConfig` | null, object, function | `null` | To change Bootstrap's default Floating UI config, see [Floating UI's configuration](https://floating-ui.com/docs/computePosition). When a function is used to create the Floating UI configuration, it's called with an object that contains the Bootstrap's default Floating UI configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Floating UI. |
+| `offset` | array, string, function | `[0, 2]` | Offset of the menu relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the placement, the reference, and floating rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding, distance]. For more information refer to Floating UI’s [offset docs](https://floating-ui.com/docs/offset). |
+| `floatingConfig` | null, object, function | `null` | To change Bootstrap’s default Floating UI config, see [Floating UI’s configuration](https://floating-ui.com/docs/computePosition). When a function is used to create the Floating UI configuration, it’s called with an object that contains the Bootstrap’s default Floating UI configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Floating UI. |
| `placement` | string | `'bottom-start'` | Placement of the menu. Physical placements: `'top'`, `'bottom'`, `'left'`, `'right'`. Logical placements (RTL-aware): `'start'`, `'end'`. All support alignment modifiers: `-start`, `-end`. Supports responsive prefixes like `'bottom-start md:end'`. |
-| `reference` | string, element, object | `'toggle'` | Reference element of the menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Floating UI's [virtual elements docs](https://floating-ui.com/docs/virtual-elements). |
-| `strategy` | string | `'absolute'` | Positioning strategy for the menu. Use `'absolute'` for default positioning, or `'fixed'` to escape containers with `overflow: hidden`. For more information refer to Floating UI's [strategy docs](https://floating-ui.com/docs/computePosition#strategy). |
+| `reference` | string, element, object | `'toggle'` | Reference element of the menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Floating UI’s [virtual elements docs](https://floating-ui.com/docs/virtual-elements). |
+| `strategy` | string | `'absolute'` | Positioning strategy for the menu. Use `'absolute'` for default positioning, or `'fixed'` to escape containers with `overflow: hidden`. For more information refer to Floating UI’s [strategy docs](https://floating-ui.com/docs/computePosition#strategy). |
| `submenuTrigger` | string | `'both'` | How submenus are triggered. Use `'click'` for click only, `'hover'` for hover only, or `'both'` for both click and hover activation. |
| `submenuDelay` | number | `100` | Delay in milliseconds before closing a submenu when the mouse leaves. Provides a grace period for diagonal mouse movement toward the submenu. |
</BsTable>
<BsTable>
| Method | Description |
| --- | --- |
-| `dispose` | Destroys an element's menu. (Removes stored data on the DOM element) |
+| `dispose` | Destroys an element’s menu. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the menu instance associated to a DOM element, you can use it like this: `bootstrap.Menu.getInstance(element)`. |
-| `getOrCreateInstance` | Static method which returns a menu instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Menu.getOrCreateInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a menu instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Menu.getOrCreateInstance(element)`. |
| `hide` | Hides the menu of a given navbar or tabbed navigation. |
| `show` | Shows the menu of a given navbar or tabbed navigation. |
| `toggle` | Toggles the menu of a given navbar or tabbed navigation. |
-| `update` | Updates the position of an element's menu. |
+| `update` | Updates the position of an element’s menu. |
</BsTable>
### Events
## How it works
-The nav overflow component (also known as the "Priority+" pattern) automatically detects when navigation items don't fit within their container and moves them into a menu. This provides a responsive navigation experience without requiring different markup for different screen sizes.
+The nav overflow component (also known as the "Priority+" pattern) automatically detects when navigation items don’t fit within their container and moves them into a menu. This provides a responsive navigation experience without requiring different markup for different screen sizes.
-Here's what you need to know before getting started:
+Here’s what you need to know before getting started:
- Add `data-bs-toggle="nav-overflow"` to any `.nav` element to enable automatic overflow detection.
- **Responds to container size**, not viewport size. The component uses a ResizeObserver to monitor its own width, so it works perfectly in embedded contexts, documentation examples, and responsive containers.
## Examples
-Add `data-bs-toggle="nav-overflow"` to your nav element. When items don't fit, they'll automatically move to a "More" menu. Drag the right edge of the container below to see how nav items automatically move to the "More" menu as space becomes limited.
+Add `data-bs-toggle="nav-overflow"` to your nav element. When items don’t fit, they’ll automatically move to a "More" menu. Drag the right edge of the container below to see how nav items automatically move to the "More" menu as space becomes limited.
<ResizableExample code={`<ul class="nav nav-pills" data-bs-toggle="nav-overflow">
<li class="nav-item">
### Collapse all
-Use the `collapseBelow` option to force all items into the overflow dropdown when the nav element's width is below a threshold. Pass a breakpoint name to resolve the value from `--bs-breakpoint-{name}`, or a number for a direct pixel value.
+Use the `collapseBelow` option to force all items into the overflow dropdown when the nav element’s width is below a threshold. Pass a breakpoint name to resolve the value from `--bs-breakpoint-{name}`, or a number for a direct pixel value.
```html
<ul class="nav nav-pills" data-bs-toggle="nav-overflow" data-bs-collapse-below="md">
### Events
-Bootstrap's nav overflow component exposes events for hooking into overflow functionality.
+Bootstrap’s nav overflow component exposes events for hooking into overflow functionality.
<BsTable>
| Event type | Description |
## Example
-Here's a navbar that includes most supported sub-components and a responsive right drawer with [our Drawer plugin]([[docsref:/components/drawer]]). Use the lower-right corner grip to resize to preview responsive behavior.
+Here’s a navbar that includes most supported sub-components and a responsive right drawer with [our Drawer plugin]([[docsref:/components/drawer]]). Use the lower-right corner grip to resize to preview responsive behavior.
<ResizableExample code={`<nav class="navbar md:navbar-expand bg-1">
<div class="container-fluid">
## How it works
-Here's what you need to know before getting started with the navbar:
+Here’s what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` with `.navbar-expand-{breakpoint}` for responsive collapsing and [color scheme](#color-schemes) classes.
- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
## Color schemes
-Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
+Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
<ResizableExample className="d-flex flex-column gap-2" showMarkup={false} code={`
<nav class="navbar md:navbar-expand" data-bs-theme="dark">
## Containers
-Although it's not required, you can wrap a navbar in a `.container` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `.navbar` to only center the contents of a [fixed or static top navbar](#placement).
+Although it’s not required, you can wrap a navbar in a `.container` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `.navbar` to only center the contents of a [fixed or static top navbar](#placement).
<Example code={`<div class="container">
<nav class="navbar lg:navbar-expand bg-1 fg-2">
Use our [position utilities]([[docsref:/utilities/position]]) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, stickied to the top (scrolls with the page until it reaches the top, then stays there), or stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there).
-Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
+Fixed navbars use `position: fixed`, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
<NavbarPlacementPlayground />
Navbars can use `.navbar-toggler`, and `.lg:navbar-expand{-sm|-md|-lg|-xl|-2xl}` classes to determine when their content appears in an drawer drawer or inline. In combination with other utilities, you can easily choose when to show or hide particular elements.
-For navbars that never collapse, add the `.lg:navbar-expand` class on the navbar. For navbars that always show the drawer drawer, don't add any `.lg:navbar-expand` class.
+For navbars that never collapse, add the `.lg:navbar-expand` class on the navbar. For navbars that always show the drawer drawer, don’t add any `.lg:navbar-expand` class.
### Drawer drawer
### Toggler
-Navbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.
+Navbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.
These examples omit the `.lg:navbar-expand` class to always show the collapsed state with the toggler visible. Click the toggler to open the drawer drawer.
### External content
-Sometimes you want to use the drawer plugin to trigger a container element for content that structurally sits outside of the `.navbar`. Because our plugin works on the `id` and `data-bs-target` matching, that's easily done!
+Sometimes you want to use the drawer plugin to trigger a container element for content that structurally sits outside of the `.navbar`. Because our plugin works on the `id` and `data-bs-target` matching, that’s easily done!
<ResizableExample code={`<dialog class="drawer drawer-top" tabindex="-1" id="navbarToggleExternalContent" data-bs-theme="dark" aria-labelledby="navbarToggleExternalContentLabel">
<div class="drawer-header">
</div>
</nav>`} />
-When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
+When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document’s structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
## CSS
| --- | --- | --- | --- |
| `allowList` | object | [Default value]([[docsref:/getting-started/javascript#sanitizer]]) | An object containing allowed tags and attributes. Those not explicitly allowed will be removed by [the content sanitizer]([[docsref:/getting-started/javascript#sanitizer]]). <Callout type="warning">**Exercise caution when adding to this list.** Refer to [OWASP’s Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information.</Callout> |
| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |
-| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Floating UI's shift middleware). By default, it’s `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Floating UI's [shift docs](https://floating-ui.com/docs/shift#boundary). |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Floating UI’s shift middleware). By default, it’s `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Floating UI’s [shift docs](https://floating-ui.com/docs/shift#boundary). |
| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
| `content` | string, element, function | `''` | The popover’s text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
| `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn’t apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
-| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Floating UI's [flip docs](https://floating-ui.com/docs/flip#fallbackplacements). |
+| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Floating UI’s [flip docs](https://floating-ui.com/docs/flip#fallbackplacements). |
| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover’s `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Prefer text when dealing with user-generated input to [prevent XSS attacks](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html). |
-| `offset` | array, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the floating placement, the reference, and floating rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [crossAxis](https://floating-ui.com/docs/offset#crossaxis), [mainAxis](https://floating-ui.com/docs/offset#mainaxis). For more information refer to Floating UI's [offset docs](https://floating-ui.com/docs/offset). |
+| `offset` | array, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the floating placement, the reference, and floating rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [crossAxis](https://floating-ui.com/docs/offset#crossaxis), [mainAxis](https://floating-ui.com/docs/offset#mainaxis). For more information refer to Floating UI’s [offset docs](https://floating-ui.com/docs/offset). |
| `placement` | string, function | `'right'` | How to position the popover: top, bottom, left, right. Supports responsive prefixes like `'top md:right lg:bottom'` to change placement at different breakpoints. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. |
-| `floatingConfig` | null, object, function | `null` | To change Bootstrap's default Floating UI config, see [Floating UI's configuration](https://floating-ui.com/docs/computePosition). When a function is used to create the Floating UI configuration, it’s called with an object that contains the Bootstrap's default Floating UI configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Floating UI. |
+| `floatingConfig` | null, object, function | `null` | To change Bootstrap’s default Floating UI config, see [Floating UI’s configuration](https://floating-ui.com/docs/computePosition). When a function is used to create the Floating UI configuration, it’s called with an object that contains the Bootstrap’s default Floating UI configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Floating UI. |
| `sanitize` | boolean | `true` | Enable [content sanitization]([[docsref:/getting-started/javascript#sanitizer]]). If true, the `template`, `content` and `title` options will be sanitized. <Callout type="warning">**Exercise caution when disabling content sanitization.** Refer to [OWASP’s Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information. Vulnerabilities caused solely by disabling content sanitization are not considered within scope for Bootstrap’s security model.</Callout> |
| `sanitizeFn` | null, function | `null` | Provide an alternative [content sanitization]([[docsref:/getting-started/javascript#sanitizer]]) function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]([[config:repo]]/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
### Basic
-Here's a simple example of a vertical stepper.
+Here’s a simple example of a vertical stepper.
<Example code={`<ol class="stepper">
<li class="stepper-item active">Create account</li>
<li class="stepper-item">Finish</li>
</ol>`} />
-Apply `.w-100` to the stepper to make it full width. Stepper items will be stretched to fill the available space. Alignment doesn't affect full-width steppers.
+Apply `.w-100` to the stepper to make it full width. Stepper items will be stretched to fill the available space. Alignment doesn’t affect full-width steppers.
<Example code={`<ol class="stepper stepper-horizontal w-100">
<li class="stepper-item active">Create account</li>
## With anchors
-Use anchor elements to build your stepper if it links across multiple pages. Add `role="button"` or use `<button>` elements if you're linking across sections in the same document.
+Use anchor elements to build your stepper if it links across multiple pages. Add `role="button"` or use `<button>` elements if you’re linking across sections in the same document.
Consider using our [link utilities]([[docsref:/utilities/link]]) for quick color control.
### Via data attributes
-Add `data-bs-toggle="toggler"` to the element to automatically. The `data-bs-target` is optional, and attribute accepts a CSS selector to apply the toggler functionality to. Be sure to add the `data-bs-attribute` and `data-bs-value` attributes to the toggled element's markup.
+Add `data-bs-toggle="toggler"` to the element to automatically. The `data-bs-target` is optional, and attribute accepts a CSS selector to apply the toggler functionality to. Be sure to add the `data-bs-attribute` and `data-bs-value` attributes to the toggled element’s markup.
<BsTable>
| Attribute | Description |
### Via JavaScript
-We don't recommend using this component programmatically, as the initial purpose of it is to avoid using JavaScript. However, you can enable manually with:
+We don’t recommend using this component programmatically, as the initial purpose of it is to avoid using JavaScript. However, you can enable manually with:
```js
var togglerElementList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="toggler"]'))
| --- | --- |
| `toggle` | Toggles a toggler element chosen attribute |
| `getInstance` | *Static* method which allows you to get the toggler instance associated with a DOM element |
-| `getOrCreateInstance` | *Static* method which allows you to get the toggler instance associated with a DOM element, or create a new one in case it wasn't initialized |
+| `getOrCreateInstance` | *Static* method which allows you to get the toggler instance associated with a DOM element, or create a new one in case it wasn’t initialized |
</BsTable>
### Events
-Bootstrap's toggler class exposes a few events for hooking into toggler functionality.
+Bootstrap’s toggler class exposes a few events for hooking into toggler functionality.
<BsTable>
| Event type | Description |
| --- | --- |
| `toggle.bs.toggler` | This event fires immediately when the `toggle` instance method is called. |
-| `toggled.bs.toggler` | This event is fired when the instance's element attribute has been changed. |
+| `toggled.bs.toggler` | This event is fired when the instance’s element attribute has been changed. |
</BsTable>
```js
### Dependencies
-The tooltip plugin requires the following JavaScript files if you're building Bootstrap's JS from source:
+The tooltip plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:
<BsTable>
| File | Description |
| --- | --- | --- | --- |
| `allowList` | object | [Default value]([[docsref:/getting-started/javascript#sanitizer]]) | An object containing allowed tags and attributes. Those not explicitly allowed will be removed by [the content sanitizer]([[docsref:/getting-started/javascript#sanitizer]]). <Callout type="warning">**Exercise caution when adding to this list.** Refer to [OWASP’s Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information.</Callout> |
| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. |
-| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Floating UI's shift middleware). By default, it’s `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Floating UI's [shift docs](https://floating-ui.com/docs/shift#boundary). |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Floating UI’s shift middleware). By default, it’s `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Floating UI’s [shift docs](https://floating-ui.com/docs/shift#boundary). |
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn’t apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
-| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Floating UI's [flip docs](https://floating-ui.com/docs/flip#fallbackplacements). |
+| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Floating UI’s [flip docs](https://floating-ui.com/docs/flip#fallbackplacements). |
| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip’s `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Prefer text when dealing with user-generated input to [prevent XSS attacks](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html). |
-| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the floating placement, the reference, and floating rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [crossAxis](https://floating-ui.com/docs/offset#crossaxis), [mainAxis](https://floating-ui.com/docs/offset#mainaxis). For more information refer to Floating UI's [offset docs](https://floating-ui.com/docs/offset). |
+| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the floating placement, the reference, and floating rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [crossAxis](https://floating-ui.com/docs/offset#crossaxis), [mainAxis](https://floating-ui.com/docs/offset#mainaxis). For more information refer to Floating UI’s [offset docs](https://floating-ui.com/docs/offset). |
| `placement` | string, function | `'top'` | How to position the tooltip: top, bottom, left, right. Supports responsive prefixes like `'top md:right lg:bottom'` to change placement at different breakpoints. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. |
-| `floatingConfig` | null, object, function | `null` | To change Bootstrap’s default Floating UI config, see [Floating UI's configuration](https://floating-ui.com/docs/computePosition). When a function is used to create the Floating UI configuration, it’s called with an object that contains the Bootstrap’s default Floating UI configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Floating UI. |
+| `floatingConfig` | null, object, function | `null` | To change Bootstrap’s default Floating UI config, see [Floating UI’s configuration](https://floating-ui.com/docs/computePosition). When a function is used to create the Floating UI configuration, it’s called with an object that contains the Bootstrap’s default Floating UI configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Floating UI. |
| `sanitize` | boolean | `true` | Enable [content sanitization]([[docsref:/getting-started/javascript#sanitizer]]). If true, the `template`, `content` and `title` options will be sanitized. <Callout type="warning">**Exercise caution when disabling content sanitization.** Refer to [OWASP’s Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information. Vulnerabilities caused solely by disabling content sanitization are not considered within scope for Bootstrap’s security model.</Callout> |
| `sanitizeFn` | null, function | `null` | Provide an alternative [content sanitization]([[docsref:/getting-started/javascript#sanitizer]]) function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]([[config:repo]]/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
## How it works
-Wrap your content in the `.prose` class to get modified font-size, line-height, and spacing specifically designed for long form content that originates from source Markdown files or WYSIWYG editors. Here's what we do with that class:
+Wrap your content in the `.prose` class to get modified font-size, line-height, and spacing specifically designed for long form content that originates from source Markdown files or WYSIWYG editors. Here’s what we do with that class:
- Set a base `font-size`, `line-height`, and some local CSS variables on the parent element.
- Normalize the spacing of lists
- Style blockquotes, code, and other inline elements.
<Callout>
- The `.not-prose` utility class can be used to opt out of `.prose` typography styles in specific elements. This is useful for components that have their own styling, such as code snippets or examples. Adding a `.prose` within a `.not-prose` won't work.
+ The `.not-prose` utility class can be used to opt out of `.prose` typography styles in specific elements. This is useful for components that have their own styling, such as code snippets or examples. Adding a `.prose` within a `.not-prose` won’t work.
</Callout>
## Example
### Lists
-When presenting information in lists, consider whether the order matters. Use numbered lists for sequential steps and bullet points for related items that don't require a specific order.
+When presenting information in lists, consider whether the order matters. Use numbered lists for sequential steps and bullet points for related items that don’t require a specific order.
- Write clear, concise list items that focus on one concept each.
- Use parallel structure across all items in your list.
## Stacked tables
-Add `.table-stacked` to convert a table's rows into stacked blocks when space is limited. Each row becomes a vertical block with the first cell acting as a bold title and the remaining cells displayed as label–value pairs. Labels are generated from `data-cell` attributes on each `<td>`.
+Add `.table-stacked` to convert a table’s rows into stacked blocks when space is limited. Each row becomes a vertical block with the first cell acting as a bold title and the remaining cells displayed as label–value pairs. Labels are generated from `data-cell` attributes on each `<td>`.
Both `.table-stacked` and `.table-responsive` use container queries, so the `.table-responsive` wrapper is required as the query container. Use `.md:table-stacked`, `.lg:table-stacked`, etc. to only stack below a specific container width. The default `.table-stacked` always stacks.
<td data-cell="Name">backdrop</td>
<td data-cell="Type">boolean or 'static'</td>
<td data-cell="Default">true</td>
- <td data-cell="Description">Includes a backdrop element. Specify static for a backdrop which doesn't close on click.</td>
+ <td data-cell="Description">Includes a backdrop element. Specify static for a backdrop which doesn’t close on click.</td>
</tr>
<tr>
<td data-cell="Name">keyboard</td>
## Responsive font sizes
-Bootstrap uses CSS's `clamp()` function to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes.
+Bootstrap uses CSS’s `clamp()` function to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes.
## CSS
### Sass maps
-The `$font-sizes` map in `_config.scss` defines Bootstrap's type scale. Each key (e.g., `xs`, `md`, `3xl`) holds a nested map with `font-size` and `line-height` values. Larger sizes use `clamp()` for responsive scaling.
+The `$font-sizes` map in `_config.scss` defines Bootstrap’s type scale. Each key (e.g., `xs`, `md`, `3xl`) holds a nested map with `font-size` and `line-height` values. Larger sizes use `clamp()` for responsive scaling.
<ScssDocs name="font-sizes" file="scss/_config.scss" />
## Colors
-There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.
+There are 13 shades of 16 colors in Bootstrap’s new color system, meaning we have 208 colors to work with when using Bootstrap.
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_config.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette]([[docsref:/customize/theme]]).
### Default colors
-Below is our default list of colors. Colors are unique in Bootstrap in that they're still Sass variables by default. In addition, they're in `oklch()` format, which is a modern color space that is designed to be perceptually uniform.
+Below is our default list of colors. Colors are unique in Bootstrap in that they’re still Sass variables by default. In addition, they’re in `oklch()` format, which is a modern color space that is designed to be perceptually uniform.
<ScssDocs name="colors-list" file="scss/_colors.scss" />
2. Add the new color to the `$colors` map.
3. Recompile source Sass to generate the new colors.
-Here's how that would look:
+Here’s how that would look:
```scss
$slate: oklch(55% 0.07 260);
## Responsive
-These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive navbar expand classes where we mix an `@each` loop for the `$breakpoints` Sass map with a media query include.
+These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive navbar expand classes where we mix an `@each` loop for the `$breakpoints` Sass map with a media query include.
<ScssDocs name="navbar-expand-loop" file="scss/_navbar.scss" />
## Sass vs CSS
-When Bootstrap 5 first introduced CSS variables, the Sass vs CSS variables setup was a little confusing and somewhat limited. As such, the relationship between Sass and CSS variables was very unclear. In Bootstrap 6, we've clarified that—here's how the two interact.
+When Bootstrap 5 first introduced CSS variables, the Sass vs CSS variables setup was a little confusing and somewhat limited. As such, the relationship between Sass and CSS variables was very unclear. In Bootstrap 6, we’ve clarified that—here’s how the two interact.
- At a high level, Sass is a way to manage [global configuration options]([[docsref:/customize/options]]) and generate CSS for our utilities, components, typography, custom properties (aka CSS variables) and more.
- We consider CSS variables to be the **first-class customization layer** for our users.
### Live demo
-Toggle between LTR and RTL on this page to see Bootstrap's logical properties in action:
+Toggle between LTR and RTL on this page to see Bootstrap’s logical properties in action:
<div class="bd-example">
<div class="form-field">
## About Sass
-[Sass](https://sass-lang.com/) is a CSS preprocessor that adds features like variables, nesting, mixins, and functions to standard CSS. You write `.scss` files, compile them, and the output is plain CSS that browsers understand. If you're new to Sass, check out the [Sass documentation](https://sass-lang.com/guide/) to learn the basics.
+[Sass](https://sass-lang.com/) is a CSS preprocessor that adds features like variables, nesting, mixins, and functions to standard CSS. You write `.scss` files, compile them, and the output is plain CSS that browsers understand. If you’re new to Sass, check out the [Sass documentation](https://sass-lang.com/guide/) to learn the basics.
-Bootstrap is written in Sass. Our source `.scss` files use Sass maps to define design tokens, mixins to generate repetitive CSS patterns, and the `@use`/`@forward` module system to organize everything. When compiled, these Sass files produce the CSS that powers every Bootstrap component and utility. This lets you override token values, remove unused components, or extend the system with your own additions. If you don't need that level of control, you can skip Sass entirely and [customize via CSS custom properties]([[docsref:/getting-started/css-variables]]) at runtime instead.
+Bootstrap is written in Sass. Our source `.scss` files use Sass maps to define design tokens, mixins to generate repetitive CSS patterns, and the `@use`/`@forward` module system to organize everything. When compiled, these Sass files produce the CSS that powers every Bootstrap component and utility. This lets you override token values, remove unused components, or extend the system with your own additions. If you don’t need that level of control, you can skip Sass entirely and [customize via CSS custom properties]([[docsref:/getting-started/css-variables]]) at runtime instead.
<Callout type="info">
**New to working with Sass and Bootstrap?** Start with [our npm guide]([[docsref:/guides/npm]]) for a step-by-step setup, or check out our [examples repository](https://github.com/twbs/examples) for ready-to-use starter projects.
## File structure
-Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/), you'll have a file structure that looks like this:
+Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/), you’ll have a file structure that looks like this:
```text
your-project/
└── index.html
```
-If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
+If you’ve downloaded our source files and aren’t using a package manager, you’ll want to manually create something similar to that structure, keeping Bootstrap’s source files separate from your own.
```text
your-project/
## Importing
-In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
+In your `custom.scss`, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
```scss
// Custom.scss
## Including
-Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you'll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you've changed it.
+Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you’ll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you’ve changed it.
```html
<!doctype html>
3. **Global tokens** (`_theme.scss` and `_root.scss`) — Semantic tokens for backgrounds (`$theme-bgs`), foregrounds (`$theme-fgs`), and borders (`$theme-borders`) are defined alongside the `$root-tokens` map, which aggregates everything into `:root` CSS custom properties.
-4. **Component tokens** (e.g., `_alert.scss`) — Each component defines its own `$*-tokens` map (e.g., `$alert-tokens`) that gets output as CSS custom properties scoped to the component's class.
+4. **Component tokens** (e.g., `_alert.scss`) — Each component defines its own `$*-tokens` map (e.g., `$alert-tokens`) that gets output as CSS custom properties scoped to the component’s class.
## Token defaults
-Every token map in Bootstrap includes the `!default` flag, allowing you to override values before Bootstrap's files are loaded. Since Bootstrap uses Sass modules (`@use`/`@forward`), you can override `!default` variables using the `with ()` syntax. For CSS custom property tokens, you have two customization paths:
+Every token map in Bootstrap includes the `!default` flag, allowing you to override values before Bootstrap’s files are loaded. Since Bootstrap uses Sass modules (`@use`/`@forward`), you can override `!default` variables using the `with ()` syntax. For CSS custom property tokens, you have two customization paths:
1. **At compile time** — Override the Sass maps that generate the CSS custom properties.
2. **At runtime** — Override the CSS custom properties directly in your stylesheet, no Sass required.
);
```
-The `() !default` declaration receives your `with()` overrides. Then `defaults()` merges your entries on top of the built-in defaults, so unspecified keys keep their original values. Any keys set to `null` are removed from the map entirely, letting you drop tokens you don't need.
+The `() !default` declaration receives your `with()` overrides. Then `defaults()` merges your entries on top of the built-in defaults, so unspecified keys keep their original values. Any keys set to `null` are removed from the map entirely, letting you drop tokens you don’t need.
### Runtime overrides
## Component tokens
-Each component defines its own token map that gets output as CSS custom properties scoped to the component's class. This makes components self-contained and easy to customize.
+Each component defines its own token map that gets output as CSS custom properties scoped to the component’s class. This makes components self-contained and easy to customize.
-Here's the alert component as an example:
+Here’s the alert component as an example:
<ScssDocs name="alert-tokens" file="scss/_alert.scss" />
## Required keys
-Bootstrap assumes the presence of some specific keys within Sass maps as we use and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used.
+Bootstrap assumes the presence of some specific keys within Sass maps as we use and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map’s key is being used.
For `$theme-colors`, the `primary`, `success`, and `danger` keys are required for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues.
### Defaults
-The `defaults()` function is the backbone of Bootstrap's customization system. It merges user overrides on top of built-in default tokens and strips any `null` entries from the result. Every token map, size map, and variant map uses it:
+The `defaults()` function is the backbone of Bootstrap’s customization system. It merges user overrides on top of built-in default tokens and strips any `null` entries from the result. Every token map, size map, and variant map uses it:
```scss
@function defaults($defaults, $overrides) { ... }
In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions.
-To help with this, we included the `color-contrast` function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
+To help with this, we included the `color-contrast` function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.
For example, to generate color swatches from our `$theme-colors` map:
### Theme classes
-The `generate-theme-classes()` mixin loops over the `$theme-colors` map and outputs a `.theme-*` class for each color. Each class maps generic `--theme-*` custom properties to the color's specific values, so components can reference `--theme-base`, `--theme-bg`, etc., and pick up the right palette from a parent `.theme-*` class:
+The `generate-theme-classes()` mixin loops over the `$theme-colors` map and outputs a `.theme-*` class for each color. Each class maps generic `--theme-*` custom properties to the color’s specific values, so components can reference `--theme-base`, `--theme-bg`, etc., and pick up the right palette from a parent `.theme-*` class:
```scss
@include generate-theme-classes();
## How it works
-Theme colors are defined in the `$theme-colors` Sass map. This map is used to generate our theme color values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
+Theme colors are defined in the `$theme-colors` Sass map. This map is used to generate our theme color values. You’ll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
Theme colors include the following semantic colors:
| `secondary` | <Swatch size="inline" bg="gray-300" /> `var(--bs-gray-300)` | Less prominent actions and states |
</BsTable>
-And within each semantic theme color, you'll find the following keys, most of which are color-mode adaptive:
+And within each semantic theme color, you’ll find the following keys, most of which are color-mode adaptive:
<BsTable>
| Theme token | Description |
Color tokens that are used for foreground, background, and border colors are called **theme layer colors** in Bootstrap. These layer colors are configured outside the `$theme-colors` Sass map in their own respective Sass maps as they have more nuanced theming use cases.
-Tokens for these three themes are defined in the `$theme-fgs`, `$theme-bgs`, and `$theme-borders` Sass maps. These maps are used to generate color mode adaptive `color`, `background-color`, and `border-color` values that are then consumed by our utilities and components. You'll find these values in the `_theme.scss` file.
+Tokens for these three themes are defined in the `$theme-fgs`, `$theme-bgs`, and `$theme-borders` Sass maps. These maps are used to generate color mode adaptive `color`, `background-color`, and `border-color` values that are then consumed by our utilities and components. You’ll find these values in the `_theme.scss` file.
### Background
## Color modes
-Bootstrap's theme and layer colors are **color mode adaptive** thanks to our use of CSS’s `light-dark()` function. This lets us specify two colors at once for a component, one for light and one for dark mode. These colors are switched by using the `data-bs-theme` attribute to set the `color-scheme` property to `light` or `dark`.
+Bootstrap’s theme and layer colors are **color mode adaptive** thanks to our use of CSS’s `light-dark()` function. This lets us specify two colors at once for a component, one for light and one for dark mode. These colors are switched by using the `data-bs-theme` attribute to set the `color-scheme` property to `light` or `dark`.
By default, `color-scheme: light dark` is set on the `:root` element, meaning Bootstrap respects the user’s system preference. You can override this at any level by setting `data-bs-theme="light"` or `data-bs-theme="dark"` on any element to force a specific mode for that subtree. Depending on the element, you may need to include `.bg-body`, `.fg-body`, or similar utilities to ensure correct color application.
-Here's the same set of components rendered in both light and dark modes side by side. Note the use of `.bg-body` for the backgrounds. Without it, the light mode demo wouldn’t have a white background—just light mode components on a dark background.
+Here’s the same set of components rendered in both light and dark modes side by side. Note the use of `.bg-body` for the backgrounds. Without it, the light mode demo wouldn’t have a white background—just light mode components on a dark background.
<Example class="p-0 overflow-hidden" code={`<div class="row g-0">
<div class="md:col-6 vstack gap-3 p-4 bg-body" data-bs-theme="light">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</div>
</div>
<div class="alert theme-primary"><p>This is a primary alert.</p></div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</div>
</div>
<div class="alert theme-primary"><p>This is a primary alert.</p></div>
"fg": light-dark(var(--blue-600), var(--blue-400)),
```
-When `data-bs-theme="light"` is active (or the user's system preference is light), this resolves to `var(--blue-600)`. In dark mode, it resolves to `var(--blue-400)`—a lighter shade that maintains readability against dark backgrounds. The same pattern applies to backgrounds, borders, and all other adaptive tokens.
+When `data-bs-theme="light"` is active (or the user’s system preference is light), this resolves to `var(--blue-600)`. In dark mode, it resolves to `var(--blue-400)`—a lighter shade that maintains readability against dark backgrounds. The same pattern applies to backgrounds, borders, and all other adaptive tokens.
For more details on toggling color modes globally, building custom modes, and JavaScript toggler examples, see the [color modes documentation]([[docsref:/customize/color-modes/]]).
</div>
</div>`} />
-This also means you can override a container's theme color with another theme color on specific components.
+This also means you can override a container’s theme color with another theme color on specific components.
<Example code={`<div class="vstack gap-3 theme-primary">
<div class="alert"><p>Primary alert</p></div>
- Overrides the default `<input>` appearance with themed colors.
- Handles the toggling of separate paths in our custom SVG for the `:checked` and indeterminate states. Two `<path>`s are included in the SVG, one for each state, and the appropriate `<path>` is shown based on the `<input>`’s state.
-For folks looking to replace our provided icons, you
'll need to add the `.checked` and `.indeterminate` classes to the `<path>`s and use them in a single `<svg>` element.
+For folks looking to replace our provided icons, you
’ll need to add the `.checked` and `.indeterminate` classes to the `<path>`s and use them in a single `<svg>` element.
Checkbox layout and labels are handled with additional HTML and CSS.
Chips are similar to badges, but they have a single size and more defined visual styles useful for indicating state and selection.
-- Chips are statically sized—they don't scale with the parent element by default.
+- Chips are statically sized—they don’t scale with the parent element by default.
- Chips can have icons, avatars, and dismiss buttons.
- Chips can be themed, individually or as a group on the parent container. By default, chips use the `subtle` and `text` theme tokens, while active state uses the `bg` and `contrast` tokens.
- Chips can be active or disabled.
## Form submission
-The combobox creates a hidden `<input>` for form submission when `data-bs-name` is set on the toggle. The hidden input's `name` matches the attribute value and its `value` updates whenever the selection changes.
+The combobox creates a hidden `<input>` for form submission when `data-bs-name` is set on the toggle. The hidden input’s `name` matches the attribute value and its `value` updates whenever the selection changes.
```html
<!-- What you write -->
<Example code={`<label for="datepicker1" class="form-label">Datepicker</label>
<input type="text" class="form-control w-12" id="datepicker1" data-bs-toggle="datepicker" placeholder="Choose date…">`} />
-Note that we're using a width utility of `.w-12` to ensure the input is wide enough to accommodate the date format and imply some affordance for the expected type of input.
+Note that we’re using a width utility of `.w-12` to ensure the input is wide enough to accommodate the date format and imply some affordance for the expected type of input.
## How it works
- Use `type="text"` to avoid conflicts with native browser date pickers
- When focused, the calendar popup appears below the input
- Selecting a date updates the input value and closes the picker
-- The picker respects Bootstrap's color modes (`data-bs-theme`)
+- The picker respects Bootstrap’s color modes (`data-bs-theme`)
- Configurable with any [Vanilla Calendar Pro option](https://vanilla-calendar.pro/docs/reference/settings) via `vcpOptions` when initializing with JavaScript
## Examples
<label for="datepicker2" class="form-label">Datepicker field</label>
<input type="text" class="form-control w-12" id="datepicker2" data-bs-toggle="datepicker" placeholder="Choose date…">
<div class="form-text">
- We'll never share your email with anyone else.
+ We’ll never share your email with anyone else.
</div>
</div>`} />
## Dark mode
-The datepicker automatically adapts to Bootstrap's color modes. When `data-bs-theme="dark"` is set on a parent element or the `<html>` tag, the calendar popup inherits that theme.
+The datepicker automatically adapts to Bootstrap’s color modes. When `data-bs-theme="dark"` is set on a parent element or the `<html>` tag, the calendar popup inherits that theme.
### Inherited from parent
### Datepicker-only theme
-Use `data-bs-datepicker-theme` to set the datepicker popup's theme independently of the input. This is useful when you want a light input with a dark datepicker, or vice versa:
+Use `data-bs-datepicker-theme` to set the datepicker popup’s theme independently of the input. This is useful when you want a light input with a dark datepicker, or vice versa:
<Example code={`<label for="datepickerTheme" class="form-label">Light input, dark datepicker</label>
<input type="text" class="form-control w-12" id="datepickerTheme" data-bs-toggle="datepicker" data-bs-datepicker-theme="dark" placeholder="Select a date">`} />
### Advanced configuration
-For features not directly exposed by Bootstrap's options, use `vcpOptions` to pass any Vanilla Calendar Pro setting:
+For features not directly exposed by Bootstrap’s options, use `vcpOptions` to pass any Vanilla Calendar Pro setting:
```js
const datepicker = new bootstrap.Datepicker(element, {
<label for="fieldText" class="form-label">Email address</label>
<input type="email" class="form-control" id="fieldText" placeholder="name@example.com">
<div class="form-text">
- We'll never share your email with anyone else.
+ We’ll never share your email with anyone else.
</div>
</div>`} />
</div>
<div class="form-field-content">
<label for="fieldCheckDesc">Subscribe to updates</label>
- <small class="form-text">We'll send you a weekly digest of what's new.</small>
+ <small class="form-text">We’ll send you a weekly digest of what’s new.</small>
</div>
</div>
<div class="form-field">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
<div class="form-text">
- We'll never share your email with anyone else.
+ We’ll never share your email with anyone else.
</div>
</div>`} />
## Border radius
-Sometimes building these components gets complicated, and CSS selectors can only do so much. We've accounted for most of the common use cases, but in case you need to provide an extra element and skip the border-radius logic, add the `.input-group-ignore` class to the element.
+Sometimes building these components gets complicated, and CSS selectors can only do so much. We’ve accounted for most of the common use cases, but in case you need to provide an extra element and skip the border-radius logic, add the `.input-group-ignore` class to the element.
Consider this extra hidden input example:
## Inline forms
-Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]([[docsref:/layout/gutters]]), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making checkboxes and labels align properly.
+Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]([[docsref:/layout/gutters]]), we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making checkboxes and labels align properly.
<Example code={`<form class="row lg:row-cols-auto g-3 align-items-center">
<div class="col-12">
## Overview
-OTP (One-Time Password) inputs are a common pattern for two-factor authentication, verification codes, and PIN entry. Bootstrap's OTP input component provides:
+OTP (One-Time Password) inputs are a common pattern for two-factor authentication, verification codes, and PIN entry. Bootstrap’s OTP input component provides:
- **Auto-advance**: Focus moves to the next input after entering a digit
- **Backspace navigation**: Pressing backspace in an empty field moves to the previous field
## Connected inputs
-Add `.input-group` to visually connect the inputs into a single cohesive field, leveraging Bootstrap's [input group]([[docsref:/forms/input-group]]) styles. We override the `width` to prevent stretching the inputs.
+Add `.input-group` to visually connect the inputs into a single cohesive field, leveraging Bootstrap’s [input group]([[docsref:/forms/input-group]]) styles. We override the `width` to prevent stretching the inputs.
<Example code={`<div class="otp input-group" data-bs-otp>
<input type="text" class="form-control" aria-label="Digit 1">
## Sizing
-Use `.otp-sm` or `.otp-lg` for different sizes. Don't use the input group size classes on the `.otp` container as we override specific CSS variables for sizing.
+Use `.otp-sm` or `.otp-lg` for different sizes. Don’t use the input group size classes on the `.otp` container as we override specific CSS variables for sizing.
<Example class="vstack align-items-start gap-3" code={`<div class="otp input-group otp-sm" data-bs-otp>
<input type="text" class="form-control" aria-label="Digit 1">
<BsTable>
| Event | Description |
| --- | --- |
-| `complete.bs.otp` | Fired when all inputs are filled. The event's `value` property contains the complete code. |
+| `complete.bs.otp` | Fired when all inputs are filled. The event’s `value` property contains the complete code. |
| `input.bs.otp` | Fired on each input change. Includes `value` (current combined value) and `index` (changed input index). |
</BsTable>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
+ <div id="emailHelp" class="form-text">We’ll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
## Overview
-Strength meters help users create secure passwords by providing real-time feedback on password complexity. Bootstrap's strength component offers:
+Strength meters help users create secure passwords by providing real-time feedback on password complexity. Bootstrap’s strength component offers:
- **Segmented meter**: Four segments that fill based on strength level
- **Progress bar variant**: A single bar that grows with strength
## Basic radio
-Similar to checkboxes, radios are styled with the `.radio` class. However, there's no custom SVG as we use pure CSS to style the input and its checked state.
+Similar to checkboxes, radios are styled with the `.radio` class. However, there’s no custom SVG as we use pure CSS to style the input and its checked state.
<Example code={`<input type="radio" id="radio" class="radio" />`} />
## How it works
-Here's how form validation works with Bootstrap:
+Here’s how form validation works with Bootstrap:
-- **Client-side validation** uses CSS pseudo-classes scoped behind the `data-bs-validate` attribute. Add `data-bs-validate` to your `<form>` to opt in to `:user-invalid` styling—validation styles only appear **after the user interacts** with a control (e.g., typing and blurring, or attempting to submit), so required fields don't show up as invalid on page load.
+- **Client-side validation** uses CSS pseudo-classes scoped behind the `data-bs-validate` attribute. Add `data-bs-validate` to your `<form>` to opt in to `:user-invalid` styling—validation styles only appear **after the user interacts** with a control (e.g., typing and blurring, or attempting to submit), so required fields don’t show up as invalid on page load.
- By default, **client-side validation only shows invalid styling.** To also show success styling for valid fields, set `data-bs-validate="valid"`.
- **Server-side validation** uses the `.is-invalid` and `.is-valid` classes to indicate field state without requiring user interaction. These work globally—no `data-bs-validate` attribute needed.
- Custom validation states beyond `valid`/`invalid` (e.g., `warning`) are supported via the `.is-*` class pattern and the `$validation-states` Sass map. There are no generated pseudo-classes for custom states.
## Custom styles
-For custom Bootstrap form validation messages, add `data-bs-validate` and the `novalidate` boolean attribute to your `<form>`. The `data-bs-validate` attribute opts in to Bootstrap's `:user-invalid` styling, while `novalidate` disables the browser default feedback tooltips. Custom feedback styles apply custom colors, borders, and focus styles to better communicate feedback.
+For custom Bootstrap form validation messages, add `data-bs-validate` and the `novalidate` boolean attribute to your `<form>`. The `data-bs-validate` attribute opts in to Bootstrap’s `:user-invalid` styling, while `novalidate` disables the browser default feedback tooltips. Custom feedback styles apply custom colors, borders, and focus styles to better communicate feedback.
Use `data-bs-validate="valid"` to also show success styling on valid fields. Add `required` to each form input and `.invalid-feedback` to provide field-specific error messages. If you enable valid styling, use `.valid-feedback` for success messages.
## Browser defaults
-Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.
+Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
<ScssDocs name="form-validation-states" file="scss/forms/_validation.scss" />
-Each key in the map is a validation state name (e.g., `"valid"`) and the value is a theme color name (e.g., `"success"`). All styling is derived from the theme color's CSS custom properties.
+Each key in the map is a validation state name (e.g., `"valid"`) and the value is a theme color name (e.g., `"success"`). All styling is derived from the theme color’s CSS custom properties.
### Sass loops
### Customizing
-Validation states can be customized via Sass with the `$validation-states` map. Located in our `forms/_validation.scss` file, this Sass map pairs each state name to a theme color name. All styling is derived from the theme color's existing CSS custom properties (`--{theme}-fg`, `--{theme}-border`, `--{theme}-bg`, etc.). While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+Validation states can be customized via Sass with the `$validation-states` map. Located in our `forms/_validation.scss` file, this Sass map pairs each state name to a theme color name. All styling is derived from the theme color’s existing CSS custom properties (`--{theme}-fg`, `--{theme}-border`, `--{theme}-bg`, etc.). While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
### CSS
-While you can use Sass to customize how Bootstrap looks, the preferred way now is to use CSS variables whenever possible, including when working with Sass. Here's how we use CSS:
+While you can use Sass to customize how Bootstrap looks, the preferred way now is to use CSS variables whenever possible, including when working with Sass. Here’s how we use CSS:
- Customize individual global and component tokens like `--bs-border-radius`, `--bs-alert-padding-x`, etc.
- Customize token values using Sass’s `with (...tokens)` syntax to override the default values.
### Examples
-Here's how we'd use a mix of Sass and CSS to customize Bootstrap. The Sass helps us manage features and gives us access to generative tokens, while the CSS allows us to customize individual tokens and values. In almost all our components, we setup a Sass map of "tokens" that are really just CSS variables. Using this map, we then generate the CSS custom properties on the component's class.
+Here’s how we’d use a mix of Sass and CSS to customize Bootstrap. The Sass helps us manage features and gives us access to generative tokens, while the CSS allows us to customize individual tokens and values. In almost all our components, we setup a Sass map of "tokens" that are really just CSS variables. Using this map, we then generate the CSS custom properties on the component’s class.
For example, the alert component has a `$alert-tokens` map that is used to generate the CSS custom properties on the `.alert` class.
}
```
-In practice for you and your projects, this means you can use Sass's module system to override the CSS variables at build-time for a specific component, or even globally.
+In practice for you and your projects, this means you can use Sass’s module system to override the CSS variables at build-time for a specific component, or even globally.
```scss
@use "../node_modules/bootstrap/scss/bootstrap" with (
);
```
-Here's a Sass-specific example, where we cannot use CSS to easily achieve the same result. The following will remove the `text` and `subtle` variants from the `button-variants` map, and override the `button-sizes` map to only include `sm` and `lg` sizes.
+Here’s a Sass-specific example, where we cannot use CSS to easily achieve the same result. The following will remove the `text` and `subtle` variants from the `button-variants` map, and override the `button-sizes` map to only include `sm` and `lg` sizes.
```scss
@use "../node_modules/bootstrap/scss/bootstrap" with (
);
```
-Here's an example of just using pure CSS to customize a CSS variables from the compiled CSS. Wherever `var(--bs-border-radius)` is used, it will be replaced with the value `.25rem`.
+Here’s an example of just using pure CSS to customize a CSS variables from the compiled CSS. Wherever `var(--bs-border-radius)` is used, it will be replaced with the value `.25rem`.
```css
:root {
### Responsive design
-Responsive web design is the practice of building a website that responds to the viewport size of the device it's being viewed on. This is achieved by using range media queries to apply different styles to the website based on the viewport size.
+Responsive web design is the practice of building a website that responds to the viewport size of the device it’s being viewed on. This is achieved by using range media queries to apply different styles to the website based on the viewport size.
```css
@media (width < 768px) {
## Guiding principles
-Beyond what Bootstrap does, here's *why* we do it—our philosophy for building on the web. At a high level, here's what guides our approach:
+Beyond what Bootstrap does, here’s *why* we do it—our philosophy for building on the web. At a high level, here’s what guides our approach:
- Components should be responsive and mobile-first
- Components should be built with a base class and extended via modifier classes
### Responsive
-Bootstrap's styles are mobile-first—we add styles as the viewport grows rather than overriding them as it shrinks. Not every component must be fully responsive, but this approach reduces CSS overrides.
+Bootstrap’s styles are mobile-first—we add styles as the viewport grows rather than overriding them as it shrinks. Not every component must be fully responsive, but this approach reduces CSS overrides.
We use range media queries (`width >= 768px`, for example) to apply styles at a specific breakpoint and carry up through the larger breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.md:d-none` applies from the medium breakpoint and up.
### HTML and CSS over JS
-Whenever possible, we prefer HTML and CSS over JavaScript—they're more accessible to people of all experience levels and faster in the browser. That's why our first-class JavaScript API is `data` attributes—it lets you write more HTML instead of JavaScript. Read more in [our JavaScript overview]([[docsref:/getting-started/javascript#data-attributes]]).
+Whenever possible, we prefer HTML and CSS over JavaScript—they’re more accessible to people of all experience levels and faster in the browser. That’s why our first-class JavaScript API is `data` attributes—it lets you write more HTML instead of JavaScript. Read more in [our JavaScript overview]([[docsref:/getting-started/javascript#data-attributes]]).
Our styles build on fundamental browser behaviors. For example, while you can put `.btn` on nearly any element, we prefer `<button>`s and `<a>`s for their semantic value. Similarly, we use native `:valid`/`:invalid` pseudo-elements for form validation rather than custom plugins.
Have a look at our table documentation for some [insight into how we’re using CSS variables]([[docsref:/content/tables#how-do-the-variants-and-accented-tables-work]]). Our [navbars also use CSS variables]([[docsref:/components/navbar#css]]) as of v5.2.0. We’re also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]([[docsref:/layout/css-grid]])—with more component usage coming in the future.
-Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
+Whenever possible, we’ll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
## Prefix
-Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
+Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that’s required on every CSS variable.
The `bs-` prefix is added automatically via [PostCSS](https://postcss.org/) using the `postcss-prefix-custom-properties` plugin during our build process. This means you write unprefixed custom properties in the source Sass (e.g., `--border-radius`) and they become prefixed in the compiled CSS (e.g., `--bs-border-radius`).
-If you're building your own custom version of Bootstrap's CSS and want to change the prefix, update the `prefix` option in your PostCSS configuration:
+If you’re building your own custom version of Bootstrap’s CSS and want to change the prefix, update the `prefix` option in your PostCSS configuration:
```js
// postcss.config.js
Pull in Bootstrap’s **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]([[docsref:/guides/contribute#sass]]) and [PostCSS]([[docsref:/guides/contribute#postcss]])** for a setup that matches our official compiled versions.
-Package managed installs don't include documentation or our full build scripts. You can also [use any demo from our Examples repo](https://github.com/twbs/examples) to quickly jumpstart Bootstrap projects.
+Package managed installs don’t include documentation or our full build scripts. You can also [use any demo from our Examples repo](https://github.com/twbs/examples) to quickly jumpstart Bootstrap projects.
After installing, head to [our npm guide]([[docsref:/guides/npm]]) for a full setup guide.
<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 Floating UI and Vanilla Calendar Pro. | <a href="[[config:download.dist]]" class="btn-subtle theme-accent btn-sm">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 and Vanilla Calendar Pro. | <a href="[[config:download.dist]]" class="btn-subtle theme-accent btn-sm">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-subtle theme-accent btn-sm">Download</a> |
</BsTable>
## Individual or compiled
-Plugins can be included individually (using Bootstrap's individual `js/dist/*.js`), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
+Plugins can be included individually (using Bootstrap’s individual `js/dist/*.js`), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don’t include both).
If you use a bundler (Webpack, Parcel, Vite…), you can import only the plugins you need and your bundler will automatically tree-shake the rest:
**Try it yourself!** Download the source code and working demo for using Bootstrap as an ES module from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/sass-js-esm). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/sass-js-esm?file=index.html).
</Callout>
-Bootstrap's JavaScript is built as native ES modules (`bootstrap.js` and `bootstrap.min.js`). Use `<script type="module">` to load Bootstrap in the browser:
+Bootstrap’s JavaScript is built as native ES modules (`bootstrap.js` and `bootstrap.min.js`). Use `<script type="module">` to load Bootstrap in the browser:
```html
<script type="module">
</script>
```
-Using ESM in the browser requires full paths or an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) for bare module specifiers like `@floating-ui/dom` and `vanilla-calendar-pro`. Here's a complete example using an import map:
+Using ESM in the browser requires full paths or an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) for bare module specifiers like `@floating-ui/dom` and `vanilla-calendar-pro`. Here’s a complete example using an import map:
```html
<!doctype html>
</html>
```
-Components that don't depend on Floating UI (like Toast, Alert, Collapse, etc.) can be imported individually without any import map:
+Components that don’t depend on Floating UI (like Toast, Alert, Collapse, etc.) can be imported individually without any import map:
```html
<script type="module">
const dialog1 = new bootstrap.Dialog(myDialogEl, configObject) // initialized with no keyboard
```
-If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. For example, to retrieve an instance directly from an element:
+If you’d like to get a particular plugin instance, each plugin exposes a `getInstance` method. For example, to retrieve an instance directly from an element:
```js
bootstrap.Popover.getInstance(myPopoverEl)
This method will return `null` if an instance is not initiated over the requested element.
-Alternatively, `getOrCreateInstance` can be used to get the instance associated with a DOM element, or create a new one in case it wasn't initialized.
+Alternatively, `getOrCreateInstance` can be used to get the instance associated with a DOM element, or create a new one in case it wasn’t initialized.
```js
bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)
```
-In case an instance wasn't initialized, it may accept and use an optional configuration object as second argument.
+In case an instance wasn’t initialized, it may accept and use an optional configuration object as second argument.
### CSS selectors in constructors
#### `dispose` method
-While it may seem correct to use the `dispose` method immediately after `hide()`, it will lead to incorrect results. Here's an example of the problem use:
+While it may seem correct to use the `dispose` method immediately after `hide()`, it will lead to incorrect results. Here’s an example of the problem use:
```js
const myToast = document.querySelector('#myToast')
### Default settings
-You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object:
+You can change the default settings for a plugin by modifying the plugin’s `Constructor.Default` object:
```js
// changes default for the toast plugin's `autohide` option to false
<BsTable class="table">
| Method | Description |
| --- | --- |
-| `dispose` | Destroys an element's plugin instance. (Removes stored data on the DOM element) |
+| `dispose` | Destroys an element’s plugin instance. (Removes stored data on the DOM element) |
| `getInstance` | *Static* method which allows you to get the plugin instance associated with a DOM element. |
-| `getOrCreateInstance` | *Static* method which allows you to get the plugin instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `getOrCreateInstance` | *Static* method which allows you to get the plugin instance associated with a DOM element, or create a new one in case it wasn’t initialized. |
</BsTable>
<BsTable class="table">
| Static property | Description |
| --- | --- |
| `NAME` | Returns the plugin name. (Example: `bootstrap.Tooltip.NAME`) |
-| `VERSION` | The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor (Example: `bootstrap.Tooltip.VERSION`) |
+| `VERSION` | The version of each of Bootstrap’s plugins can be accessed via the `VERSION` property of the plugin’s constructor (Example: `bootstrap.Tooltip.VERSION`) |
</BsTable>
## Sanitizer
<JsDocs name="allow-list" file="js/src/util/sanitizer.js" removeIndentation={false} />
<Callout type="warning">
-**Exercise caution when using these advanced options.** Refer to [OWASP's Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information. Vulnerabilities caused solely by disabling or modifying content sanitization are not considered within scope for Bootstrap's security model.
+**Exercise caution when using these advanced options.** Refer to [OWASP’s Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information. Vulnerabilities caused solely by disabling or modifying content sanitization are not considered within scope for Bootstrap’s security model.
</Callout>
You can add new values to this default `allowList`:
## Disabled JavaScript
-Bootstrap's plugins have no special fallback when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
+Bootstrap’s plugins have no special fallback when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
## Upgrade
-Bootstrap 6 is a major release with many breaking changes to modernize our codebase, adopt newer build tools, and improve customization. Keep reading for a guide on how to migrate from v5 to v6, and a full changelog of what's new.
+Bootstrap 6 is a major release with many breaking changes to modernize our codebase, adopt newer build tools, and improve customization. Keep reading for a guide on how to migrate from v5 to v6, and a full changelog of what’s new.
1. Bump your Bootstrap dependency:
}
```
-2. If using all of Bootstrap's Sass files, include it in your Sass using `@use`:
+2. If using all of Bootstrap’s Sass files, include it in your Sass using `@use`:
```scss
@use "bootstrap/scss/bootstrap";
```
- With this, you can then easily override Bootstrap's Sass variables and maps:
+ With this, you can then easily override Bootstrap’s Sass variables and maps:
```scss
@use "bootstrap/scss/bootstrap" with (
);
```
-3. If using only certain parts of Bootstrap's Sass files, you can use `@use` to import them individually. Be aware that our Sass file structure has changed and you may need to adjust your imports accordingly.
+3. If using only certain parts of Bootstrap’s Sass files, you can use `@use` to import them individually. Be aware that our Sass file structure has changed and you may need to adjust your imports accordingly.
```scss
@use "bootstrap/scss/forms";
- Removed `_variables.scss`, consolidating all variables into `_config.scss`
- Added `_theme.scss` where we setup all our global theming for how colors are applied
- **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.
+ - 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 `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.
+ - Increased the `2xl` breakpoint from 1400px to 1536px, and it’s container from 1320px to 1440px.
- **Adopted modern CSS color functions.** All Sass color variables now use `oklch()` notation (e.g., `$blue: oklch(60% 0.24 240)`) and tint/shade scales are generated with `color-mix(in lab, ...)` in the compiled CSS. The v5 `$*-rgb` CSS custom properties and `rgba()` patterns have been removed. This requires browser support for `color-mix()` and `oklch()`.
- **New theme token system with `.theme-*` classes.** Per-component color variant classes (like `.alert-primary`, `.badge.bg-primary`, `.btn-primary`) are replaced by a composable `.theme-{name}` pattern. Adding `.theme-primary` to a component sets `--theme-bg`, `--theme-fg`, `--theme-border`, `--theme-contrast`, and other semantic CSS custom properties that the component reads. This applies across buttons, badges, alerts, cards, accordions, and more.
- **Responsive and state classes now use a prefix instead of an infix or suffix.** Class names follow the Tailwind-style `prefix:class` pattern (e.g., `md:d-none` instead of `d-md-none`, `hover:opacity-50` instead of `opacity-50-hover`). In HTML, use the unescaped colon: `class="md:d-none"`. This applies to utilities, grid, pseudo-state variants, and all responsive components.
- Removed `create-css-vars()` mixin (unused).
- **Renamed `breakpoint-infix()` to `breakpoint-prefix()`.** The function now returns a prefix string (e.g., `"md\:"`) instead of an infix (e.g., `"-md"`). The `loop-breakpoints-up` and `loop-breakpoints-down` mixins now expose `$prefix` instead of `$infix`. Update any custom Sass that calls these functions or mixins.
- **CSS variable prefixing now handled by PostCSS.** The `$prefix` Sass variable has been removed. CSS custom properties are now written without a prefix in the Sass source and prefixed automatically via `postcss-prefix-custom-properties` during the build. To customize the prefix, update your PostCSS configuration instead of Sass.
-- **Removed RFS (Responsive Font Sizes).** The `scss/vendor/_rfs.scss` file and all RFS mixins have been removed. Typography now uses fixed `rem` values and `clamp()` for responsive sizing. If you relied on RFS for automatic font scaling, you'll need to implement your own responsive typography or use `clamp()` directly.
+- **Removed RFS (Responsive Font Sizes).** The `scss/vendor/_rfs.scss` file and all RFS mixins have been removed. Typography now uses fixed `rem` values and `clamp()` for responsive sizing. If you relied on RFS for automatic font scaling, you’ll need to implement your own responsive typography or use `clamp()` directly.
- **Renamed Sass files for consistency.** `_placeholders.scss` is now `_placeholder.scss` and `_spinners.scss` is now `_spinner.scss`. Update any individual `@use` imports for these files.
- **Standardized focus styles with `focus-ring` mixin.** All component-specific `*-focus-box-shadow` Sass variables (e.g., `$btn-focus-box-shadow`, `$input-focus-box-shadow`, `$accordion-button-focus-box-shadow`) have been removed. Focus styles are now handled by a shared `@mixin focus-ring()` using `--focus-ring`, `--focus-ring-width`, `--focus-ring-offset`, and `--focus-ring-color` CSS custom properties. Customize focus styles by overriding these tokens in `_root.scss` instead of individual Sass variables.
- **Renamed `$grid-breakpoints` to `$breakpoints`.**
### JavaScript
-- **Bootstrap's JavaScript is now ESM-only.** We no longer ship UMD bundles. All dist files (`bootstrap.js`, `bootstrap.bundle.js`, and their minified versions) are native ES modules. The plugin APIs themselves are unchanged—only how you load and reference them is different.
+- **Bootstrap’s JavaScript is now ESM-only.** We no longer ship UMD bundles. All dist files (`bootstrap.js`, `bootstrap.bundle.js`, and their minified versions) are native ES modules. The plugin APIs themselves are unchanged—only how you load and reference them is different.
- CDN `<script>` tags must add `type="module"`:
```html
<script type="module" src="bootstrap.bundle.min.js"></script>
```
- - In v5, the UMD bundle automatically created a `window.bootstrap` global. ES modules don't do this, so there is no longer a `bootstrap` global object. If you called plugin APIs through the global namespace, you must update to explicit imports:
+ - In v5, the UMD bundle automatically created a `window.bootstrap` global. ES modules don’t do this, so there is no longer a `bootstrap` global object. If you called plugin APIs through the global namespace, you must update to explicit imports:
**Before (v5):**
```js
- Replaced Popper.js (`@popperjs/core`) with [Floating UI](https://floating-ui.com/) (`@floating-ui/dom`) for menu, tooltip, and popover positioning. The `popperConfig` option on Tooltip, Popover, and Menu (formerly Dropdown) has been renamed to `floatingConfig`. Update any custom positioning configuration accordingly.
- Added [Vanilla Calendar Pro](https://vanilla-calendar.pro/) (`vanilla-calendar-pro`) as a peer dependency for the new Datepicker component.
- Removed the `jspm` configuration from `package.json`.
-- Added `"sideEffects"` metadata to `package.json` to enable tree shaking in bundlers while preserving the Data API event listeners that Bootstrap's plugins register at the top level.
+- Added `"sideEffects"` metadata to `package.json` to enable tree shaking in bundlers while preserving the Data API event listeners that Bootstrap’s plugins register at the top level.
- Added `"exports"` map to `package.json` for explicit subpath access to source, dist, and Sass files.
### Components
- Added `xs` button size (`.btn-xs`).
- **Rebuilt accordion on native `<details>` / `<summary>`.** The markup structure has fundamentally changed:
- v5: `.accordion-item` > `.accordion-header` > `button.accordion-button` + `.accordion-collapse` > `.accordion-body`, controlled by the Collapse JavaScript plugin.
- - v6: `<details class="accordion-item">` > `<summary class="accordion-header">` + `<div class="accordion-body">`, using the browser's native disclosure widget. No JavaScript dependency for basic open/close behavior.
+ - v6: `<details class="accordion-item">` > `<summary class="accordion-header">` + `<div class="accordion-body">`, using the browser’s native disclosure widget. No JavaScript dependency for basic open/close behavior.
- Exclusive accordion groups (only one item open) are handled via the HTML `name` attribute on `<details>` elements, replacing the `data-bs-parent` approach.
- The `.accordion-button` and `.accordion-collapse` classes have been removed.
- The expand/collapse icon now uses an `.accordion-icon` element (typically an SVG) inside the summary, replacing the CSS `background-image` approach.
- **Refactor checks, radios, and switches.**
- Split apart `_form-check.scss` into separate stylesheets: `_checkbox.scss`, `_radio.scss`, and `_switch.scss`.
- Also split apart the documentation pages for checks, radios, and switches.
- - Added new CSS variables on each of these components. _Side note: we could've shared variables here, but chose not to for simplicity's sake._
+ - Added new CSS variables on each of these components. _Side note: we could’ve shared variables here, but chose not to for simplicity’s sake._
- Removed several now unused Sass variables.
- Checkboxes now have a wrapping element and an SVG in the DOM for checked and indeterminate states. Radios and switches do not.
- Revamped layout for checks, radios, and switches with labels (and descriptions). We now have custom elements for layout that include basic flexbox styling.
We’re building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
-1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We’ll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
```sh
mkdir my-project && cd my-project
npm i --save-dev parcel
```
-3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using menus, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
+3. **Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using menus, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
```sh
npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
## Project structure
-We’ve already created the `my-project` folder and initialized npm. Now we'll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
+We’ve already created the `my-project` folder and initialized npm. Now we’ll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
```sh
mkdir {src,src/js,src/scss}
Parcel will automatically detect we’re using Sass and install the [Sass Parcel plugin](https://parceljs.org/languages/sass/) to support it. However, if you wish, you can also manually run `npm i --save-dev @parcel/transformer-sass`.
-2. **Add the Parcel npm scripts.** Open the `package.json` and add the following `start` script to the `scripts` object. We'll use this script to start our Parcel development server and render the HTML file we created after it’s compiled into the `dist` directory.
+2. **Add the Parcel npm scripts.** Open the `package.json` and add the following `start` script to the `scripts` object. We’ll use this script to start our Parcel development server and render the HTML file we created after it’s compiled into the `dist` directory.
```json
{
<img class="img-fluid" src="/docs/[[config:docs_version]]/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running" />
-In the next and final section to this guide, we'll import all of Bootstrap’s CSS and JavaScript.
+In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.
## Import Bootstrap
description: The official guide for how to include Bootstrap’s CSS and JavaScript in your project using a CDN.
---
-Get started using Bootstrap in seconds by including our production-ready CSS and JavaScript by [using a CDN]([[docsref:/getting-started/install#cdn]]) without the need for any build steps. CDNs provide copies of Bootstrap's codebase that's ready to be used in any environment with minimal code changes required on your part.
+Get started using Bootstrap in seconds by including our production-ready CSS and JavaScript by [using a CDN]([[docsref:/getting-started/install#cdn]]) without the need for any build steps. CDNs provide copies of Bootstrap’s codebase that’s ready to be used in any environment with minimal code changes required on your part.
<Callout type="info">
**Got the gist already?** See the end result in this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj).
</html>
```
- You can also include [Floating UI](https://floating-ui.com/) and [Vanilla Calendar Pro](https://vanilla-calendar.pro/) and our JS separately via an import map. If you don't plan to use menus, popovers, or tooltips, save some kilobytes by not including Floating UI. If you don't plan to use the datepicker, you can omit Vanilla Calendar Pro.
+ You can also include [Floating UI](https://floating-ui.com/) and [Vanilla Calendar Pro](https://vanilla-calendar.pro/) and our JS separately via an import map. If you don’t plan to use menus, popovers, or tooltips, save some kilobytes by not including Floating UI. If you don’t plan to use the datepicker, you can omit Vanilla Calendar Pro.
```html
<script type="importmap">
We’re building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
-1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We’ll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
```sh
mkdir my-project && cd my-project
npm i --save-dev vite
```
-3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using menus, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
+3. **Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using menus, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
```sh
npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
## Project structure
-We’ve already created the `my-project` folder and initialized npm. Now we'll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
+We’ve already created the `my-project` folder and initialized npm. Now we’ll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
```sh
mkdir {src,src/js,src/scss}
With dependencies installed and our project folder ready for us to start coding, we can now configure Vite and run our project locally.
-1. **Open `vite.config.js` in your editor.** Since it’s blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Vite where to look for our project’s JavaScript and how the development server should behave (pulling from the `src` folder with hot reload).
+1. **Open `vite.config.js` in your editor.** Since it’s blank, we’ll need to add some boilerplate config to it so we can start our server. This part of the config tells Vite where to look for our project’s JavaScript and how the development server should behave (pulling from the `src` folder with hot reload).
```js
import { resolve } from 'path'
}
```
-2. **Next we fill in `src/index.html`.** This is the HTML page Vite will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps.
+2. **Next we fill in `src/index.html`.** This is the HTML page Vite will load in the browser to utilize the bundled CSS and JS we’ll add to it in later steps.
```html
<!doctype html>
We’re including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap’s CSS is loaded by Vite.
-3. **Now we need an npm script to run Vite.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Vite dev server.
+3. **Now we need an npm script to run Vite.** Open `package.json` and add the `start` script shown below (you should already have the test script). We’ll use this script to start our local Vite dev server.
```json
{
We’re building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
-1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We’ll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
```sh
mkdir my-project && cd my-project
npm init -y
```
-2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. Additionally, we'll install `html-webpack-plugin` to be able to store our `index.html` in `src` directory instead of the default `dist` one. We use `--save-dev` to signal that these dependencies are only for development use and not for production.
+2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. Additionally, we’ll install `html-webpack-plugin` to be able to store our `index.html` in `src` directory instead of the default `dist` one. We use `--save-dev` to signal that these dependencies are only for development use and not for production.
```sh
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 Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using menus, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
+3. **Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using menus, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
```sh
npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
## Project structure
-We’ve already created the `my-project` folder and initialized npm. Now we'll also create our `src` and `dist` folders to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
+We’ve already created the `my-project` folder and initialized npm. Now we’ll also create our `src` and `dist` folders to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
```sh
mkdir {src,src/js,src/scss}
With dependencies installed and our project folder ready for us to start coding, we can now configure Webpack and run our project locally.
-1. **Open `webpack.config.js` in your editor.** Since it’s blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project’s JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload).
+1. **Open `webpack.config.js` in your editor.** Since it’s blank, we’ll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project’s JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload).
```js
'use strict'
}
```
-2. **Next we fill in our `src/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step.
+2. **Next we fill in our `src/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we’ll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step.
```html
<!doctype html>
We’re including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap’s CSS is loaded by Webpack.
-3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server. You can also add a `build` script shown below to build your project.
+3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We’ll use this script to start our local Webpack dev server. You can also add a `build` script shown below to build your project.
```json
{
<img class="img-fluid" src="/docs/[[config:docs_version]]/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running"/>
-In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap’s CSS and JavaScript.
+In the next and final section to this guide, we’ll set up the Webpack loaders and import all of Bootstrap’s CSS and JavaScript.
## Import Bootstrap
<button type="button" class="btn-outline theme-secondary">Cancel</button>
</div>`} />
-Here's how you'd do it with responsive stacks, which are based on a container media queries. Wrap the stack in an extra element or add `.stack-container` to an existing parent to give the stack a "container" to adapt its layout from.
+Here’s how you’d do it with responsive stacks, which are based on a container media queries. Wrap the stack in an extra element or add `.stack-container` to an existing parent to give the stack a "container" to adapt its layout from.
<ResizableExample code={`<div class="stack-container">
<div class="vstack gap-2 sm:hstack">
- **[Stepper]([[docsref:/components/stepper]])** — The `.stepper-overflow` wrapper uses `container-type: inline-size` to establish a containment context for the horizontally scrolling stepper pattern.
-Here's how the navbar implements container queries:
+Here’s how the navbar implements container queries:
```scss
// The navbar is defined as a query container
## Overview
-Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items.
+Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we’ve enforced `flex-wrap: wrap` and increased the number of flex items.
**Heads up!** This property has no effect on single rows of flex items.
toc: true
---
-Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started.
+Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started.
The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
| Option | Type | Default value | Description |
| --- | --- | --- | --- |
| [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
-| [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
+| [`values`](#values) | **Required** | – | List of values, or a map if you don’t want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
| [`selector`](#selector) | Optional | `class` | Type of CSS selector in the generated CSS ruleset. Can be `class`, `attr-starts`, or `attr-includes`. |
-| [`child-selector`](#child-selector) | Optional | null | A child/descendant selector appended to the utility's selector, wrapped in `:where()` for zero specificity. Use to target children instead of the element itself. |
+| [`child-selector`](#child-selector) | Optional | null | A child/descendant selector appended to the utility’s selector, wrapped in `:where()` for zero specificity. Use to target children instead of the element itself. |
| [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. If not provided and `property` is a string, the `values` keys are used for the `class` names. |
| [`variables`](#variables) | Optional | null | List or map of CSS custom properties to generate within each utility class. When a list, each variable receives the utility value. When a map, the provided static values are used. |
| [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate as prefix-style classes. |
| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
-| [`important`](#importance) | Optional | `false` | Boolean indicating if `!important` should be added to the utility's CSS rules. |
+| [`important`](#importance) | Optional | `false` | Boolean indicating if `!important` should be added to the utility’s CSS rules. |
| [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
</BsTable>
<div class="badge fs-6 bg-accent mb-3">Required</div>
-The `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility's ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
+The `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
```scss
$utilities: (
Use the `selector` option to change the CSS selector used in the generated CSS ruleset. The default option is to generate a class selector. When using an attribute selector—either `attr-starts` or `attr-includes`—**the `class` option is required**. We use these internally to simplify the construction of other utilities.
-For attribute selectors, you'll most likely want the `attr-includes` as the starting attribute selector in CSS applies to the entire string of classes in an attribute's value. For example, `[class^="name"]` would not match `class="example name"`.
+For attribute selectors, you’ll most likely want the `attr-includes` as the starting attribute selector in CSS applies to the entire string of classes in an attribute’s value. For example, `[class^="name"]` would not match `class="example name"`.
As an example, to change from `.ratio-*` to `[class*="ratio-"]`:
### Variables
-Use the `variables` option to generate CSS custom properties within each utility class's ruleset. The value can be either a **list** or a **map**.
+Use the `variables` option to generate CSS custom properties within each utility class’s ruleset. The value can be either a **list** or a **map**.
When `variables` is a **list**, each variable receives the current utility value:
### States
-Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class with a prefix-style syntax matching the responsive prefix pattern. For example, to change opacity on hover, add `state: hover` and you'll get `.hover\:opacity:hover` in your compiled CSS.
+Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class with a prefix-style syntax matching the responsive prefix pattern. For example, to change opacity on hover, add `state: hover` and you’ll get `.hover\:opacity:hover` in your compiled CSS.
Need multiple pseudo-classes? Use a space-separated list of states: `state: hover focus`.
## Using the API
-Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.
+Now that you’re familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.
### Override utilities
### Add utilities
-New utilities can be added to the default `$utilities` map with a `map.merge`. Make sure our required Sass files and `_utilities.scss` are loaded first, then use `map.merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
+New utilities can be added to the default `$utilities` map with a `map.merge`. Make sure our required Sass files and `_utilities.scss` are loaded first, then use `map.merge` to add your additional utilities. For example, here’s how to add a responsive `cursor` utility with three values.
```scss
@use "bootstrap/scss/bootstrap" as *;
### Modify utilities
-Modify existing utilities in the default `$utilities` map with `map.get` and `map.merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map.merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map.get` to access and modify the utility's options and values.
+Modify existing utilities in the default `$utilities` map with `map.get` and `map.merge` functions. In the example below, we’re adding an additional value to the `width` utilities. Start with an initial `map.merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map.get` to access and modify the utility’s options and values.
```scss
@use "bootstrap/scss/bootstrap" as *;
### Add, remove, modify
-You can add, remove, and modify many utilities all at once with the [`map.merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map.
+You can add, remove, and modify many utilities all at once with the [`map.merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here’s how you can combine the previous examples into one larger map.
```scss
@use "bootstrap/scss/bootstrap" as *;
## Sass map
-Within `_config.scss`, you can change the aspect ratios you want to use. Here's our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
+Within `_config.scss`, you can change the aspect ratios you want to use. Here’s our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
<ScssDocs name="aspect-ratios" file="scss/_config.scss" />
## Border
-Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
+Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
### Additive
## Reset color
-Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
+Reset a text or link’s color with `.text-reset`, so that it inherits the color from its parent.
<Example code={`<p class="fg-3">
Lighter body text with a <a href="#" class="text-reset">reset link</a>.
## Clearfix
-There's no more clearfix helper in Bootstrap 6 as it's an outdated technique. Instead, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix.
+There’s no more clearfix helper in Bootstrap 6 as it’s an outdated technique. Instead, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix.
<Example code={`<div class="d-flow-root">
<div class="float-end px-3 py-2 border rounded-3">Floated element</div>
## Grow and shrink
-Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
+Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
<Example class="bd-example-flex" code={`<div class="d-flex">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Third flex item</div>
</div>`} />
-Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
+Use `.flex-shrink-*` utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
<Example class="bd-example-flex" code={`<div class="d-flex">
<div class="p-2 w-100">Flex item</div>
- a preferred value (calculated using viewport units)
- and, a maximum value
-As the viewport changes, the font size smoothly transitions between the minimum and maximum values. Here's how each size scales at different viewport widths.
+As the viewport changes, the font size smoothly transitions between the minimum and maximum values. Here’s how each size scales at different viewport widths.
<BsTable>
| Size | Definition | Min | Max | @ 500px | @ 1400px |
## Overview
-Use grid utilities to control CSS Grid layout behavior. These utilities work with Bootstrap's [CSS Grid layout system]([[docsref:/layout/css-grid]]) to manage column counts and auto-placement algorithms.
+Use grid utilities to control CSS Grid layout behavior. These utilities work with Bootstrap’s [CSS Grid layout system]([[docsref:/layout/css-grid]]) to manage column counts and auto-placement algorithms.
<Callout type="info">
**CSS Grid is opt-in.** To use these utilities, you need to enable the CSS Grid system by setting `$enable-cssgrid: true` in your Sass configuration. See our [CSS Grid documentation]([[docsref:/layout/css-grid]]) for more details.
## Column counts
-Use `grid-cols-{value}` utilities to set the number of columns in a CSS Grid container by modifying the `--bs-columns` CSS variable. Bootstrap's CSS Grid system supports 3, 4, and 6 column layouts out of the box.
+Use `grid-cols-{value}` utilities to set the number of columns in a CSS Grid container by modifying the `--bs-columns` CSS variable. Bootstrap’s CSS Grid system supports 3, 4, and 6 column layouts out of the box.
<Example class="bd-example-cssgrid" code={`<div class="grid text-center grid-cols-3">
<div>Column</div>
- **For links**: Remove the `href` attribute, making it a non-interactive anchor or placeholder link
<Callout type="warning">
-**Accessibility warning:** Using `pointer-events: none` can create accessibility barriers. Always ensure that disabled elements are properly marked up with appropriate ARIA attributes and that keyboard users can't accidentally focus them.
+**Accessibility warning:** Using `pointer-events: none` can create accessibility barriers. Always ensure that disabled elements are properly marked up with appropriate ARIA attributes and that keyboard users can’t accidentally focus them.
</Callout>
## Use cases
<p class="2xl:text-end">End aligned text on viewports sized 2xl (extra extra large) or wider.</p>`} />
<Callout>
-Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
+Note that we don’t provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
</Callout>
## Responsive
### Offset
-Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`.
+Change the underline’s distance from your text. Offset is set in `em` units to automatically scale with the element’s current `font-size`.
<Example code={`<p><a href="#">Default link</a></p>
<p><a class="underline-offset-1" href="#">Offset 1 link</a></p>
### Color
-Change the underline's color independent of the text color.
+Change the underline’s color independent of the text color.
<Example code={getData('theme-colors').map((themeColor) => `<p><a href="#" class="underline-${themeColor.name}">${themeColor.title} underline</a></p>`)} />
### Opacity
-Change the underline's opacity. Requires adding `.underline-{color}` to first set an `rgba()` color we use to then modify the alpha opacity.
+Change the underline’s opacity. Requires adding `.underline-{color}` to first set an `rgba()` color we use to then modify the alpha opacity.
<Example code={`<p><a class="underline-10" href="#">Underline opacity 10</a></p>
<p><a class="underline-20" href="#">Underline opacity 20</a></p>
## Comparison
-Here's a side-by-side comparison of all three styles for each theme color:
+Here’s a side-by-side comparison of all three styles for each theme color:
<Example code={getData('theme-colors').map((themeColor) => `<div class="d-flex gap-2 mb-2">
<div class="theme-${themeColor.name} theme-contrast p-3 flex-fill text-center rounded">${themeColor.title} contrast</div>
projects / thirdparty / bootstrap.git / commitdiff
