- Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.
-
-
-
-
- dispose
-
-
- Destroys an element's alert. (Removes stored data on the DOM element)
-
-
-
-
- getInstance
-
-
- Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: bootstrap.Alert.getInstance(alert)
-
-
-
-
- getOrCreateInstance
-
-
- Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.
- You can use it like this: bootstrap.Alert.getOrCreateInstance(element)
-
-
-
-
+You can create an alert instance with the alert constructor, for example:
+
+```js
+var myAlert = document.getElementById('myAlert')
+var bsAlert = new bootstrap.Alert(myAlert)
+```
+
+This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.)
+
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
+| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. |
+| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: bootstrap.Alert.getOrCreateInstance(element). |
+{{< /bs-table >}}
+
+Basic usage:
```js
var alertNode = document.querySelector('.alert')
-var alert = bootstrap.Alert.getInstance(alertNode)
+var alert = bootstrap.Alert.getOrCreateInstance(alertNode)
alert.close()
```
@@ -263,28 +239,12 @@ alert.close()
Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
-
-
-
-
Event
-
Description
-
-
-
-
-
close.bs.alert
-
- Fires immediately when the close instance method is called.
-
-
-
-
closed.bs.alert
-
- Fired when the alert has been closed and CSS transitions have completed.
-
-
-
-
+{{< bs-table >}}
+| Event | Description |
+| --- | --- |
+| `close.bs.alert` | Fires immediately when the `close` instance method is called. |
+| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. |
+{{< /bs-table >}}
```js
var myAlert = document.getElementById('myAlert')
diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md
index 7f400df1a19f..bacc6b23d2f1 100644
--- a/site/content/docs/5.1/components/buttons.md
+++ b/site/content/docs/5.1/components/buttons.md
@@ -184,49 +184,14 @@ var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
```
-
-
-
-
Method
-
Description
-
-
-
-
-
- toggle
-
-
- Toggles push state. Gives the button the appearance that it has been activated.
-
-
-
-
- dispose
-
-
- Destroys an element's button. (Removes stored data on the DOM element)
-
-
-
-
- getInstance
-
-
- Static method which allows you to get the button instance associated to a DOM element, you can use it like this: bootstrap.Button.getInstance(element)
-
-
-
-
- getOrCreateInstance
-
-
- Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized.
- You can use it like this: bootstrap.Button.getOrCreateInstance(element)
-
-
-
-
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
+| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`|
+| `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)` |
+{{< /bs-table >}}
For example, to toggle all buttons
diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md
index c7f710893940..86de96a074e3 100644
--- a/site/content/docs/5.1/components/carousel.md
+++ b/site/content/docs/5.1/components/carousel.md
@@ -310,55 +310,16 @@ var carousel = new bootstrap.Carousel(myCarousel)
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`.
-
-
-
-
Name
-
Type
-
Default
-
Description
-
-
-
-
-
interval
-
number
-
5000
-
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
-
-
-
keyboard
-
boolean
-
true
-
Whether the carousel should react to keyboard events.
-
-
-
pause
-
string | boolean
-
'hover'
-
If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
-
On touch-enabled devices, when set to 'hover', cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
-
-
-
ride
-
string | boolean
-
false
-
Autoplays the carousel after the user manually cycles the first item. If set to 'carousel', autoplays the carousel on load.
-
-
-
wrap
-
boolean
-
true
-
Whether the carousel should cycle continuously or have hard stops.
-
-
-
touch
-
boolean
-
true
-
Whether the carousel should support left/right swipe interactions on touchscreen devices.
-
-
-
+{{< bs-table >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. If `false`, carousel will not automatically cycle. |
+| `keyboard` | boolean | `true` | Whether the carousel should react to keyboard events. |
+| `pause` | string, boolean | `"hover"` | If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior. |
+| `ride` | string, boolean | `false` | Autoplays the carousel after the user manually cycles the first item. If set to`"carousel"`, autoplays the carousel on load. |
+| `wrap` | boolean | `true` | Whether the carousel should cycle continuously or have hard stops. |
+| `touch` | boolean | `true` | Whether the carousel should support left/right swipe interactions on touchscreen devices. |
+{{< /bs-table >}}
### Methods
@@ -376,61 +337,19 @@ var carousel = new bootstrap.Carousel(myCarousel, {
})
```
-
-
-
-
Method
-
Description
-
-
-
-
-
cycle
-
Cycles through the carousel items from left to right.
-
-
-
pause
-
Stops the carousel from cycling through items.
-
-
-
prev
-
Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).
-
-
-
next
-
Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).
-
-
-
nextWhenVisible
-
Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. Returns to the caller before the target item has been shown
-
-
-
to
-
Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs).
-
-
-
dispose
-
Destroys an element's carousel. (Removes stored data on the DOM element)
-
-
-
- getInstance
-
-
- Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element)
-
-
-
-
- getOrCreateInstance
-
-
- Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized.
- You can use it like this: bootstrap.Carousel.getOrCreateInstance(element)
-
-
-
-
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `cycle` | Cycles through the carousel items from left to right. |
+| `pause` | Stops the carousel from cycling through items. |
+| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown** |
+| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+| `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)` |
+| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)` |
+{{< /bs-table >}}
### Events
@@ -443,24 +362,12 @@ Bootstrap's carousel class exposes two events for hooking into carousel function
All carousel events are fired at the carousel itself (i.e. at the `
`).
-
-
-
-
Event type
-
Description
-
-
-
-
-
slide.bs.carousel
-
Fires immediately when the slide instance method is invoked.
-
-
-
slid.bs.carousel
-
Fired when the carousel has completed its slide transition.
-
-
-
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `slide.bs.carousel` | Fires immediately when the `slide` instance method is invoked. |
+| `slid.bs.carousel` | Fired when the carousel has completed its slide transition. |
+{{< /bs-table >}}
```js
var myCarousel = document.getElementById('myCarousel')
diff --git a/site/content/docs/5.1/components/collapse.md b/site/content/docs/5.1/components/collapse.md
index 75e4b20a3ff5..4fb6f5e9443f 100644
--- a/site/content/docs/5.1/components/collapse.md
+++ b/site/content/docs/5.1/components/collapse.md
@@ -143,30 +143,12 @@ var collapseList = collapseElementList.map(function (collapseEl) {
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`.
-
-
-
-
Name
-
Type
-
Default
-
Description
-
-
-
-
-
parent
-
selector | jQuery object | DOM element
-
false
-
If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
-
-
-
toggle
-
boolean
-
true
-
Toggles the collapsible element on invocation
-
-
-
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+`parent` | selector, jQuery object, DOM element | `false` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
+`toggle` | boolean | `true` | Toggles the collapsible element on invocation |
+{{< /bs-table >}}
### Methods
@@ -185,80 +167,29 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, {
})
```
-
-
-
-
Method
-
Description
-
-
-
-
-
toggle
-
Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
-
-
-
show
-
Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs).
-
-
-
hide
-
Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the hidden.bs.collapse event occurs).
-
-
-
dispose
-
Destroys an element's collapse. (Removes stored data on the DOM element)
-
-
-
- getInstance
-
-
- Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: bootstrap.Collapse.getInstance(element)
-
-
-
-
- getOrCreateInstance
-
-
- Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized.
- You can use it like this: bootstrap.Collapse.getOrCreateInstance(element)
-
-
-
-
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). |
+| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (e.g., before the `shown.bs.collapse` event occurs). |
+| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (e.g., before the `hidden.bs.collapse` event occurs). |
+| `dispose` | Destroys an element's collapse. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: `bootstrap.Collapse.getInstance(element)` |
+| `getOrCreateInstance` | Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Collapse.getOrCreateInstance(element)` |
+{{< /bs-table >}}
### Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
-
-
-
-
Event type
-
Description
-
-
-
-
-
show.bs.collapse
-
This event fires immediately when the show instance method is called.
-
-
-
shown.bs.collapse
-
This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
-
-
-
hide.bs.collapse
-
This event is fired immediately when the hide method has been called.
-
-
-
hidden.bs.collapse
-
This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
-
-
-
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `show.bs.collapse` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.collapse` | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
+| `hide.bs.collapse` | This event is fired immediately when the `hide` method has been called. |
+| `hidden.bs.collapse` | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
+{{< /bs-table >}}
```js
var myCollapsible = document.getElementById('myCollapsible')
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
index 0bd6a4fdfe07..b053955dbbd6 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -1065,70 +1065,16 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`.
-
-
-
-
Name
-
Type
-
Default
-
Description
-
-
-
-
-
boundary
-
string | element
-
'clippingParents'
-
Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's 'clippingParents' and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's detectOverflow docs.
-
-
-
reference
-
string | element | object
-
'toggle'
-
Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', an HTMLElement reference or an object providing getBoundingClientRect. For more information refer to Popper's constructor docs and virtual element docs.
-
-
-
display
-
string
-
'dynamic'
-
By default, we use Popper for dynamic positioning. Disable this with static.
-
-
-
offset
-
array | string | function
-
[0, 2]
-
-
Offset of the dropdown 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 popper placement, the reference, and popper 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 Popper's offset docs.
-
-
-
-
autoClose
-
boolean | string
-
true
-
-
Configure the auto close behavior of the dropdown:
-
-
true - the dropdown will be closed by clicking outside or inside the dropdown menu.
-
false - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method.
-
'inside' - the dropdown will be closed (only) by clicking inside the dropdown menu.
-
'outside' - the dropdown will be closed (only) by clicking outside the dropdown menu.
-
-
The dropdown can always be closed with the ESC key.
When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
-
-
-
-
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
+| `reference` | string, element | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
+| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |
+| `offset` | number, string, function | `[0, 2]` | Offset of the dropdown 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 popper placement, the reference, and popper 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](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing esc key)
`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
Note: the dropdown can always be closed with the ESC key |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+{{< /bs-table >}}
#### Using function with `popperConfig`
@@ -1144,110 +1090,30 @@ var dropdown = new bootstrap.Dropdown(element, {
### Methods
-
-
-
-
Method
-
Description
-
-
-
-
-
toggle
-
- Toggles the dropdown menu of a given navbar or tabbed navigation.
-
-
-
-
show
-
- Shows the dropdown menu of a given navbar or tabbed navigation.
-
-
-
-
hide
-
- Hides the dropdown menu of a given navbar or tabbed navigation.
-
-
-
-
update
-
- Updates the position of an element's dropdown.
-
-
-
-
dispose
-
- Destroys an element's dropdown. (Removes stored data on the DOM element)
-
-
-
-
- getInstance
-
-
- Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: bootstrap.Dropdown.getInstance(element)
-
-
-
-
- getOrCreateInstance
-
-
- Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized.
- You can use it like this: bootstrap.Dropdown.getOrCreateInstance(element)
-
-
-
-
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |
+| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |
+| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |
+| `update` | Updates the position of an element's dropdown. |
+| `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)` |
+| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. |
+{{< /bs-table >}}
### Events
All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`'s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.
-
-
-
-
Method
-
Description
-
-
-
-
-
- show.bs.dropdown
-
-
- Fires immediately when the show instance method is called.
-
-
-
-
- shown.bs.dropdown
-
-
- Fired when the dropdown has been made visible to the user and CSS transitions have completed.
-
-
-
-
- hide.bs.dropdown
-
-
- Fires immediately when the hide instance method has been called.
-
-
-
-
- hidden.bs.dropdown
-
-
- Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
-
-
-
-
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `show.bs.dropdown` | Fires immediately when the show instance method is called. |
+| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. |
+| `hide.bs.dropdown` | Fires immediately when the hide instance method has been called. |
+| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |
+{{< /bs-table >}}
```js
var myDropdown = document.getElementById('myDropdown')
diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md
index 724210f99df7..7b6574ba8609 100644
--- a/site/content/docs/5.1/components/list-group.md
+++ b/site/content/docs/5.1/components/list-group.md
@@ -504,32 +504,14 @@ When showing a new tab, the events fire in the following order:
If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
-
-
-
-
Event type
-
Description
-
-
-
-
-
show.bs.tab
-
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
-
-
-
shown.bs.tab
-
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
-
-
-
hide.bs.tab
-
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
-
-
-
hidden.bs.tab
-
This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
-
-
-
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+{{< /bs-table >}}
```js
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md
index e591f5b9b622..6facc239c5d1 100644
--- a/site/content/docs/5.1/components/modal.md
+++ b/site/content/docs/5.1/components/modal.md
@@ -568,37 +568,14 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-
-
-
-
Size
-
Class
-
Modal max-width
-
-
-
-
-
Small
-
.modal-sm
-
300px
-
-
-
Default
-
None
-
500px
-
-
-
Large
-
.modal-lg
-
800px
-
-
-
Extra large
-
.modal-xl
-
1140px
-
-
-
+{{< bs-table "table" >}}
+| Size | Class | Modal max-width
+| --- | --- | --- |
+| Small | `.modal-sm` | `300px` |
+| Default | None | `500px` |
+| Large | `.modal-lg` | `800px` |
+| Extra large | `.modal-xl` | `1140px` |
+{{< /bs-table >}}
Our default modal without modifier class constitutes the "medium" size modal.
@@ -660,40 +637,16 @@ Our default modal without modifier class constitutes the "medium" size modal.
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
-
@@ -859,36 +812,13 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
-
-
-
-
Name
-
Type
-
Default
-
Description
-
-
-
-
-
backdrop
-
boolean or the string 'static'
-
true
-
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal when clicked.
-
-
-
keyboard
-
boolean
-
true
-
Closes the modal when escape key is pressed
-
-
-
focus
-
boolean
-
true
-
Puts the focus on the modal when initialized.
-
-
-
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal when clicked. |
+| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. |
+| `focus` | boolean | `true` | Puts the focus on the modal when initialized. |
+{{< /bs-table >}}
### Methods
@@ -906,105 +836,31 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
})
```
-#### toggle
-
-Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
-
-```js
-myModal.toggle()
-```
-
-#### show
-
-Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
-
-```js
-myModal.show()
-```
-
-Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property).
-
-```js
-var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
-myModal.show(modalToggle)
-```
-
-#### hide
-
-Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
-
-```js
-myModal.hide()
-```
-
-#### handleUpdate
-
-Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
-
-```js
-myModal.handleUpdate()
-```
-
-#### dispose
-
-Destroys an element's modal. (Removes stored data on the DOM element)
-
-```js
-myModal.dispose()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the modal instance associated with a DOM element
-
-```js
-var myModalEl = document.getElementById('myModal')
-var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var myModalEl = document.querySelector('#myModal')
-var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
-```
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
+| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `var modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
+| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
+| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
+| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
+| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+{{< /bs-table >}}
### Events
Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`).
-
-
-
-
Event type
-
Description
-
-
-
-
-
show.bs.modal
-
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
-
-
-
shown.bs.modal
-
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
-
-
-
hide.bs.modal
-
This event is fired immediately when the hide instance method has been called.
-
-
-
hidden.bs.modal
-
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
-
-
-
hidePrevented.bs.modal
-
This event is fired when the modal is shown, its backdrop is static and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
-
-
-
+{{< bs-table >}}
+| Event | Description |
+| --- | --- |
+| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
+| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
+| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
+{{< /bs-table >}}
```js
var myModalEl = document.getElementById('myModal')
diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
index 11bb28029d5a..7e2a20d7ac0b 100644
--- a/site/content/docs/5.1/components/navs-tabs.md
+++ b/site/content/docs/5.1/components/navs-tabs.md
@@ -646,32 +646,14 @@ When showing a new tab, the events fire in the following order:
If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
-
-
-
-
Event type
-
Description
-
-
-
-
-
show.bs.tab
-
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
-
-
-
shown.bs.tab
-
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
-
-
-
hide.bs.tab
-
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
-
-
-
hidden.bs.tab
-
This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
-
-
-
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+{{< /bs-table >}}
```js
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md
index 93ccc6f783a3..f1d2002ace1e 100644
--- a/site/content/docs/5.1/components/popovers.md
+++ b/site/content/docs/5.1/components/popovers.md
@@ -11,7 +11,7 @@ toc: true
Things to know when using the popover plugin:
- Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
-- Popovers require the [tooltip plugin]({{< docsref "/components/tooltips" >}}) as a dependency.
+- Popovers require the [popover plugin]({{< docsref "/components/popovers" >}}) as a dependency.
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
- Zero-length `title` and `content` values will never show a popover.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -121,7 +121,7 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'),
### Disabled elements
-Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`.
+Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or popover). As a workaround, you'll want to trigger the popover from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`.
For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
@@ -172,158 +172,29 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
{{< /callout >}}
-
-
-
-
Name
-
Type
-
Default
-
Description
-
-
-
-
-
animation
-
boolean
-
true
-
Apply a CSS fade transition to the popover
-
-
-
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
-
''
-
-
Default content value if data-bs-content attribute isn't present.
-
If a function is given, it will be called with its this reference set to the element that the popover is attached to.
-
-
-
-
delay
-
number | object
-
0
-
-
Delay showing and hiding the popover (ms) - does not 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 }
-
-
-
-
html
-
boolean
-
false
-
Insert HTML into the popover. If false, innerText property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
-
-
-
placement
-
string | function
-
'right'
-
-
How to position the popover - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the popover.
-
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. The this context is set to the popover instance.
-
-
-
-
selector
-
string | false
-
false
-
If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
The popover's title will be injected into the .popover-header.
-
The popover's content will be injected into the .popover-body.
-
.popover-arrow will become the popover's arrow.
-
The outermost wrapper element should have the .popover class.
-
-
-
-
title
-
string | element | function
-
''
-
-
Default title value if title attribute isn't present.
-
If a function is given, it will be called with its this reference set to the element that the popover is attached to.
-
-
-
-
trigger
-
string
-
'click'
-
How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
-
-
-
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
- Popper's behavior docs
-
-
-
boundary
-
string | element
-
'clippingParents'
-
Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default it's 'clippingParents' and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's detectOverflow docs.
-
-
-
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.
Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
-
-
-
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 popper placement, the reference, and popper 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 Popper's offset docs.
When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
-
-
-
-
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the popover |
+| `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 | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to.
+| `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 }`. |
+| `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. Use text if you're worried about XSS attacks. |
+| `placement` | string, function | `'top'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. 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. The `this` context is set to the popover instance. |
+| `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]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). |
+| `template` | string | `'
'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. |
+| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. 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. |
+| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+| `offset` | number, string, function | `[0, 0]` | 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 popper placement, the reference, and popper 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](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1)", [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `fallbackPlacements` | string, 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 Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.|
+{{< /bs-table >}}
{{< callout info >}}
#### Data attributes for individual popovers
@@ -349,136 +220,51 @@ var popover = new bootstrap.Popover(element, {
{{< partial "callout-danger-async-methods.md" >}}
{{< /callout >}}
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
+| `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
+| `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
+| `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** |
+| `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. |
+| `setContent` | Gives a way to change the popover's content after its initialization. |
+| `toggleEnabled` | Toggles the ability for an element's popover to be shown or hidden. |
+| `update` | Updates the position of an element's popover. |
+| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized |
+{{< /bs-table >}}
-#### show
-
-Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
-
-```js
-myPopover.show()
-```
-
-#### hide
-
-Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
```js
-myPopover.hide()
-```
-
-#### toggle
-
-Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-
-```js
-myPopover.toggle()
-```
-
-#### dispose
-
-Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-
-```js
-myPopover.dispose()
-```
-
-#### enable
-
-Gives an element's popover the ability to be shown. **Popovers are enabled by default.**
-
-```js
-myPopover.enable()
-```
-
-#### disable
-
-Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
-
-```js
-myPopover.disable()
-```
-
-#### setContent
-
-Gives a way to change the popover's content after its initialization.
+// getOrCreateInstance example
+var exampleTriggerEl = document.getElementById('example')
+var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
-```js
+// setContent example
myPopover.setContent({
'.popover-header': 'another title',
'.popover-body': 'another content'
})
+
```
{{< callout info >}}
The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
{{< /callout >}}
-#### toggleEnabled
-
-Toggles the ability for an element's popover to be shown or hidden.
-
-```js
-myPopover.toggleEnabled()
-```
-
-#### update
-
-Updates the position of an element's popover.
-
-```js
-myPopover.update()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the popover instance associated with a DOM element
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
-```
-
### Events
-
-
-
-
Event type
-
Description
-
-
-
-
-
show.bs.popover
-
This event fires immediately when the show instance method is called.
-
-
-
shown.bs.popover
-
This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
-
-
-
hide.bs.popover
-
This event is fired immediately when the hide instance method has been called.
-
-
-
hidden.bs.popover
-
This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
-
-
-
inserted.bs.popover
-
This event is fired after the show.bs.popover event when the popover template has been added to the DOM.
Pixels to offset from top when calculating position of scroll.
-
-
-
method
-
string
-
auto
-
Finds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use the Element.getBoundingClientRect() method to get scroll coordinates. position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.
-
-
-
target
-
string | jQuery object | DOM element
-
-
Specifies element to apply Scrollspy plugin.
-
-
-
-
### Events
-
-
-
-
Event type
-
Description
-
-
-
-
-
activate.bs.scrollspy
-
This event fires on the scroll element whenever a new item becomes activated by the scrollspy.
-
-
-
+{{< bs-table "table" >}}
+| Event | Description |
+| --- | --- |
+| `activate.bs.scrollspy` | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
+{{< /bs-table >}}
```js
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index 531181c2f9cc..a982c47db3e6 100644
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -349,38 +349,13 @@ var toastList = toastElList.map(function (toastEl) {
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
-
-
-
-
Name
-
Type
-
Default
-
Description
-
-
-
-
-
animation
-
boolean
-
true
-
Apply a CSS fade transition to the toast
-
-
-
autohide
-
boolean
-
true
-
Auto hide the toast
-
-
-
delay
-
number
-
- 5000
-
-
Delay hiding the toast (ms)
-
-
-
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the toast |
+| `autohide` | boolean | `true` | Automatically hide the toast after the delay |
+| `delay` | number | `5000` | Delay in milliseconds before hiding the toast |
+{{< /bs-table >}}
### Methods
@@ -388,77 +363,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
{{< partial "callout-danger-async-methods.md" >}}
{{< /callout >}}
-#### show
-
-Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
-You have to manually call this method, instead your toast won't show.
-
-```js
-toast.show()
-```
-
-#### hide
-
-Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
-
-```js
-toast.hide()
-```
-
-#### dispose
-
-Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
-
-```js
-toast.dispose()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the toast instance associated with a DOM element
-
-```js
-var myToastEl = document.getElementById('myToastEl')
-var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var myToastEl = document.getElementById('myToastEl')
-var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
-```
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. |
+| `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
+| `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. |
+| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. Par example: `var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance|
+| `getOrCreateInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn't initialized. `var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance |
+{{< /bs-table >}}
### Events
-
-
-
-
Event type
-
Description
-
-
-
-
-
show.bs.toast
-
This event fires immediately when the show instance method is called.
-
-
-
shown.bs.toast
-
This event is fired when the toast has been made visible to the user.
-
-
-
hide.bs.toast
-
This event is fired immediately when the hide instance method has been called.
-
-
-
hidden.bs.toast
-
This event is fired when the toast has finished being hidden from the user.
-
-
-
+{{< bs-table "table" >}}
+| Event | Description |
+| --- | --- |
+| `show.bs.toast` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. |
+| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. |
+{{< /bs-table >}}
```js
var myToastEl = document.getElementById('myToast')
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index ee2808f41b41..502b6b27cf01 100644
--- a/site/content/docs/5.1/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -202,156 +202,28 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
{{< /callout >}}
-
-
-
-
Name
-
Type
-
Default
-
Description
-
-
-
-
-
animation
-
boolean
-
true
-
Apply a CSS fade transition to the tooltip
-
-
-
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.
-
-
-
-
delay
-
number | object
-
0
-
-
Delay showing and hiding the tooltip (ms) - does not 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 }
-
-
-
-
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.
-
Use text if you're worried about XSS attacks.
-
-
-
-
placement
-
string | function
-
'top'
-
-
How to position the tooltip - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the tooltip.
-
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. The this context is set to the tooltip instance.
-
-
-
-
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 and an informative example.
The tooltip's title will be injected into the .tooltip-inner.
-
.tooltip-arrow will become the tooltip's arrow.
-
The outermost wrapper element should have the .tooltip class and role="tooltip".
-
-
-
-
title
-
string | element | function
-
''
-
-
Default title value if title attribute isn't present.
-
If a function is given, it will be called with its this reference set to the element that the tooltip is attached to.
-
-
-
-
trigger
-
string
-
'hover focus'
-
-
How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
-
'manual' indicates that the tooltip will be triggered programmatically via the .show(), .hide() and .toggle() methods; this value cannot be combined with any other trigger.
-
'hover' on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.
-
-
-
-
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
- Popper's behavior docs
-
-
-
boundary
-
string | element
-
'clippingParents'
-
Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default it's 'clippingParents' and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's detectOverflow docs.
-
-
-
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.
Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
-
-
-
offset
-
array | string | function
-
[0, 0]
-
-
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 popper placement, the reference, and popper 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 Popper's offset docs.
When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
-
-
-
-
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip |
+| `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. |
+| `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 }`. |
+| `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. Use text if you're worried about XSS attacks. |
+| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. 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. The `this` context is set to the tooltip instance. |
+| `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]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). |
+| `template` | string | `'
'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
+| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. 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 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. |
+| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+| `offset` | number, string, function | `[0, 0]` | 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 popper placement, the reference, and popper 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](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1)", [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `fallbackPlacements` | string, 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 Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements. |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.|
+{{< /bs-table >}}
{{< callout info >}}
#### Data attributes for individual tooltips
@@ -377,131 +249,47 @@ var tooltip = new bootstrap.Tooltip(element, {
{{< partial "callout-danger-async-methods.md" >}}
{{< /callout >}}
-#### show
-
-Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
-
-```js
-tooltip.show()
-```
-
-#### hide
-
-Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `show` | Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. |
+| `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
+| `toggle` | Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
+| `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** |
+| `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. |
+| `setContent` | Gives a way to change the tooltip's content after its initialization. |
+| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. |
+| `update` | Updates the position of an element's tooltip. |
+| `getInstance` | *Static* method which allows you to get the tooltip 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 tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized |
+{{< /bs-table >}}
```js
-tooltip.hide()
-```
-
-#### toggle
-
-Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-
-```js
-tooltip.toggle()
-```
-
-#### dispose
-
-Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-
-```js
-tooltip.dispose()
-```
-
-#### enable
-
-Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
-
-```js
-tooltip.enable()
-```
-
-#### disable
+// getOrCreateInstance example
+var exampleTriggerEl = document.getElementById('example')
+var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
-Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
+// setContent example
+tooltip.setContent({ '.tooltip-inner': 'another title' })
-```js
-tooltip.disable()
```
-#### setContent
-
-Gives a way to change the tooltip's content after its initialization.
-
-```js
-tooltip.setContent({ '.tooltip-inner': 'another title' })
-```
{{< callout info >}}
The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
{{< /callout >}}
-#### toggleEnabled
-
-Toggles the ability for an element's tooltip to be shown or hidden.
-
-```js
-tooltip.toggleEnabled()
-```
-
-#### update
-
-Updates the position of an element's tooltip.
-
-```js
-tooltip.update()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the tooltip instance associated with a DOM element
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
-```
-
### Events
-
-
-
-
Event type
-
Description
-
-
-
-
-
show.bs.tooltip
-
This event fires immediately when the show instance method is called.
-
-
-
shown.bs.tooltip
-
This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
-
-
-
hide.bs.tooltip
-
This event is fired immediately when the hide instance method has been called.
-
-
-
hidden.bs.tooltip
-
This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
-
-
-
inserted.bs.tooltip
-
This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM.
-
-
-
+{{< bs-table >}}
+| Event | Description |
+| --- | --- |
+| `show.bs.tooltip` | This event fires immediately when the show instance method is called. |
+| `shown.bs.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
+| `hide.bs.tooltip` | This event is fired immediately when the hide instance method has been called. |
+| `hidden.bs.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `inserted.bs.tooltip` | This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM. |
+{{< /bs-table >}}
```js
var myTooltipEl = document.getElementById('myTooltip')
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index 04c4cdebf7e2..7d00e42c6429 100644
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -84,52 +84,16 @@ This `font-family` is applied to the `` and automatically inherited global
All heading elements—e.g., `
`—and `
` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
-
-
-
-
Heading
-
Example
-
-
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h1. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h2. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h3. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h4. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h5. Bootstrap heading
-
-
-
- {{< markdown >}}``{{< /markdown >}}
-
-
h6. Bootstrap heading
-
-
-
+{{< bs-table "table" >}}
+| Heading | Example |
+| --- | --- |
+| `` | h1. Bootstrap heading |
+| `` | h2. Bootstrap heading |
+| `` | h3. Bootstrap heading |
+| `` | h4. Bootstrap heading |
+| `` | h5. Bootstrap heading |
+| `` | h6. Bootstrap heading |
+{{< /bs-table >}}
## Horizontal rules
@@ -227,41 +191,41 @@ For indicating sample output from a program use the `` tag.
Tables are slightly adjusted to style `
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
-
-
-
- This is an example table, and this is its caption to describe the contents.
-
-
-
-
Table heading
-
Table heading
-
Table heading
-
Table heading
-
-
-
-
-
Table cell
-
Table cell
-
Table cell
-
Table cell
-
-
-
Table cell
-
Table cell
-
Table cell
-
Table cell
-
-
-
Table cell
-
Table cell
-
Table cell
-
Table cell
-
-
-
-
+{{< example >}}
+
+
+ This is an example table, and this is its caption to describe the contents.
+
+
+
+
Table heading
+
Table heading
+
Table heading
+
Table heading
+
+
+
+
+
Table cell
+
Table cell
+
Table cell
+
Table cell
+
+
+
Table cell
+
Table cell
+
Table cell
+
Table cell
+
+
+
Table cell
+
Table cell
+
Table cell
+
Table cell
+
+
+
+{{< /example >}}
## Forms
diff --git a/site/content/docs/5.1/content/typography.md b/site/content/docs/5.1/content/typography.md
index 44c65252da71..3c71df7d11f8 100644
--- a/site/content/docs/5.1/content/typography.md
+++ b/site/content/docs/5.1/content/typography.md
@@ -22,52 +22,16 @@ These styles can be found within `_reboot.scss`, and the global variables are de
All HTML headings, `
diff --git a/site/content/docs/5.1/getting-started/browsers-devices.md b/site/content/docs/5.1/getting-started/browsers-devices.md
index bdda154a309a..41885feaadba 100644
--- a/site/content/docs/5.1/getting-started/browsers-devices.md
+++ b/site/content/docs/5.1/getting-started/browsers-devices.md
@@ -26,68 +26,23 @@ We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intende
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
-
+{{< bs-table "table" >}}
+| | Chrome | Firefox | Microsoft Edge | Opera | Safari |
+| --- | --- | --- | --- | --- | --- |
+| **Mac** | Supported | Supported | Supported | Supported | Supported |
+| **Windows** | Supported | Supported | Supported | Supported | — |
+{{< /bs-table >}}
For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox.
diff --git a/site/content/docs/5.1/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md
index 07f6bdb9808f..b9b92506ca1f 100644
--- a/site/content/docs/5.1/getting-started/contents.md
+++ b/site/content/docs/5.1/getting-started/contents.md
@@ -68,96 +68,25 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us
Bootstrap includes a handful of options for including some or all of our compiled CSS.
-
+{{< bs-table "table" >}}
+| CSS files | Layout | Content | Components | Utilities |
+| --- | --- | --- | --- | --- |
+| `bootstrap.css` `bootstrap.min.css` `bootstrap.rtl.css` `bootstrap.rtl.min.css` | Included | Included | Included | Included |
+| `bootstrap-grid.css` `bootstrap-grid.rtl.css` `bootstrap-grid.min.css` `bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
+| `bootstrap-utilities.css` `bootstrap-utilities.rtl.css` `bootstrap-utilities.min.css` `bootstrap-utilities.rtl.min.css` | — | — | — | Included |
+| `bootstrap-reboot.css` `bootstrap-reboot.rtl.css` `bootstrap-reboot.min.css` `bootstrap-reboot.rtl.min.css` | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
+{{< /bs-table >}}
## JS files
Similarly, we have options for including some or all of our compiled JavaScript.
-
-
-
-
JS files
-
Popper
-
-
-
-
-
-
bootstrap.bundle.js
-
bootstrap.bundle.min.js
-
-
Included
-
-
-
-
bootstrap.js
-
bootstrap.min.js
-
-
—
-
-
-
+{{< bs-table "table" >}}
+| JS Files | Popper |
+| --- | --- |
+| `bootstrap.bundle.js` `bootstrap.bundle.min.js` | Included |
+| `bootstrap.js` `bootstrap.min.js` | – |
+{{< /bs-table >}}
## Bootstrap source code
diff --git a/site/content/docs/5.1/getting-started/contribute.md b/site/content/docs/5.1/getting-started/contribute.md
index 337bb2a43ca8..67fe67f94fd7 100644
--- a/site/content/docs/5.1/getting-started/contribute.md
+++ b/site/content/docs/5.1/getting-started/contribute.md
@@ -23,48 +23,14 @@ When completed, you'll be able to run the various commands provided from the com
Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
-
-
-
-
Task
-
Description
-
-
-
-
-
- npm start
-
-
- Compiles CSS and JavaScript, builds the documentation, and starts a local server.
-
-
-
-
- npm run dist
-
-
- Creates the dist/ directory with compiled files. Requires Sass, Autoprefixer, and terser.
-
-
-
-
- npm test
-
-
- Runs tests locally after running npm run dist
-
-
-
-
- npm run docs-serve
-
-
- Builds and runs the documentation locally.
-
-
-
-
+{{< bs-table >}}
+| Task | Description |
+| --- | --- |
+| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
+| `npm run dist` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). |
+| `npm test` | Runs tests locally after running `npm run dist` |
+| `npm run docs-serve` | Builds and runs the documentation locally. |
+{{< /bs-table >}}
{{< callout info >}}
{{< partial "callout-info-npm-starter.md" >}}
@@ -78,7 +44,7 @@ Dart Sass uses a rounding precision of 10 and for efficiency reasons does not al
## Autoprefixer
-Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
+Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details.
@@ -99,5 +65,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
## Troubleshooting
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
-
-[autoprefixer]: https://github.com/postcss/autoprefixer
diff --git a/site/content/docs/5.1/layout/breakpoints.md b/site/content/docs/5.1/layout/breakpoints.md
index 568bbfeebd12..772cd60e1c1e 100644
--- a/site/content/docs/5.1/layout/breakpoints.md
+++ b/site/content/docs/5.1/layout/breakpoints.md
@@ -19,47 +19,17 @@ toc: true
Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files.
-
-
-
-
Breakpoint
-
Class infix
-
Dimensions
-
-
-
-
-
Extra small
-
None
-
<576px
-
-
-
Small
-
sm
-
≥576px
-
-
-
Medium
-
md
-
≥768px
-
-
-
Large
-
lg
-
≥992px
-
-
-
Extra large
-
xl
-
≥1200px
-
-
-
Extra extra large
-
xxl
-
≥1400px
-
-
-
+{{< bs-table "table" >}}
+| Breakpoint | Class infix | Dimensions |
+| --- | --- | --- |
+| Extra small | None |<576px |
+| Small | `sm` | ≥576px |
+| Medium | `md` | ≥768px |
+| Large | `lg` | ≥992px |
+| Extra large | `xl` | ≥1200px |
+| Extra extra large | xxl | ≥1400px |
+{{< /bs-table >}}
+
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
diff --git a/site/content/docs/5.1/layout/containers.md b/site/content/docs/5.1/layout/containers.md
index 456225b942b5..6557bea4e6ee 100644
--- a/site/content/docs/5.1/layout/containers.md
+++ b/site/content/docs/5.1/layout/containers.md
@@ -20,102 +20,17 @@ The table below illustrates how each container's `max-width` compares to the ori
See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
-
-
-
-
-
- Extra small
- <576px
-
-
- Small
- ≥576px
-
-
- Medium
- ≥768px
-
-
- Large
- ≥992px
-
-
- X-Large
- ≥1200px
-
-
- XX-Large
- ≥1400px
-
-
-
-
-
-
.container
-
100%
-
540px
-
720px
-
960px
-
1140px
-
1320px
-
-
-
.container-sm
-
100%
-
540px
-
720px
-
960px
-
1140px
-
1320px
-
-
-
.container-md
-
100%
-
100%
-
720px
-
960px
-
1140px
-
1320px
-
-
-
.container-lg
-
100%
-
100%
-
100%
-
960px
-
1140px
-
1320px
-
-
-
.container-xl
-
100%
-
100%
-
100%
-
100%
-
1140px
-
1320px
-
-
-
.container-xxl
-
100%
-
100%
-
100%
-
100%
-
100%
-
1320px
-
-
-
.container-fluid
-
100%
-
100%
-
100%
-
100%
-
100%
-
100%
-
-
-
+{{< bs-table "table" >}}
+| | Extra small
<576px
| Small
≥576px
| Medium
≥768px
| Large
≥992px
| X-Large
≥1200px
| XX-Large
≥1400px
|
+| --- | --- | --- | --- | --- | --- | --- |
+| `.container` | 100% | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-sm` | 100% | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-md` | 100% | 100% | 720px | 960px | 1140px | 1320px |
+| `.container-lg` | 100% | 100% | 100% | 960px | 1140px | 1320px |
+| `.container-xl` | 100% | 100% | 100% | 100% | 1140px | 1320px |
+| `.container-xxl` | 100% | 100% | 100% | 100% | 100% | 1320px |
+| `.container-fluid` | 100% | 100% | 100% | 100% | 100% | 100% |
+{{< /bs-table >}}
## Default container
diff --git a/site/content/docs/5.1/utilities/display.md b/site/content/docs/5.1/utilities/display.md
index 9e5a5dfb2d5b..65eb333c7b20 100644
--- a/site/content/docs/5.1/utilities/display.md
+++ b/site/content/docs/5.1/utilities/display.md
@@ -56,72 +56,24 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,x
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
-
-
-
-
Screen size
-
Class
-
-
-
-
-
Hidden on all
-
.d-none
-
-
-
Hidden only on xs
-
.d-none .d-sm-block
-
-
-
Hidden only on sm
-
.d-sm-none .d-md-block
-
-
-
Hidden only on md
-
.d-md-none .d-lg-block
-
-
-
Hidden only on lg
-
.d-lg-none .d-xl-block
-
-
-
Hidden only on xl
-
.d-xl-none .d-xxl-block
-
-
-
Hidden only on xxl
-
.d-xxl-none
-
-
-
Visible on all
-
.d-block
-
-
-
Visible only on xs
-
.d-block .d-sm-none
-
-
-
Visible only on sm
-
.d-none .d-sm-block .d-md-none
-
-
-
Visible only on md
-
.d-none .d-md-block .d-lg-none
-
-
-
Visible only on lg
-
.d-none .d-lg-block .d-xl-none
-
-
-
Visible only on xl
-
.d-none .d-xl-block .d-xxl-none
-
-
-
Visible only on xxl
-
.d-none .d-xxl-block
-
-
-
+{{< bs-table >}}
+| Screen size | Class |
+| --- | --- |
+| Hidden on all | `.d-none` |
+| Hidden only on xs | `.d-none .d-sm-block` |
+| Hidden only on sm | `.d-sm-none .d-md-block` |
+| Hidden only on md | `.d-md-none .d-lg-block` |
+| Hidden only on lg | `.d-lg-none .d-xl-block` |
+| Hidden only on xl | `.d-xl-none` |
+| Hidden only on xxl | `.d-xxl-none .d-xxl-block` |
+| Visible on all | `.d-block` |
+| Visible only on xs | `.d-block .d-sm-none` |
+| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
+| Visible only on md | `.d-none .d-md-block .d-lg-none` |
+| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
+| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
+| Visible only on xxl | `.d-none .d-xxl-block` |
+{{< /bs-table >}}
{{< example >}}