diff options
35 files changed, 131 insertions, 131 deletions
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 994c5b1a6b..76ac6f4fb4 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -22,9 +22,9 @@ Alerts are available for any length of text, as well as an optional close button {{< /alerts.inline >}} {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ### Link color @@ -70,9 +70,9 @@ You can see this in action with a live demo: </div> {{< /example >}} -{{< callout warning >}} +{{% callout warning %}} When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. -{{< /callout >}} +{{% /callout %}} ## JavaScript behavior diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 78bc89f5b1..d47588f339 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -49,9 +49,9 @@ Use our background utility classes to quickly change the appearance of a badge. {{< /badge.inline >}} {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## Pill badges diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.0/components/button-group.md index 730faf2db2..fb0b7bce5b 100644 --- a/site/content/docs/5.0/components/button-group.md +++ b/site/content/docs/5.0/components/button-group.md @@ -18,13 +18,13 @@ Wrap a series of buttons with `.btn` in `.btn-group`. </div> {{< /example >}} -{{< callout warning >}} +{{% callout warning %}} ##### Ensure correct `role` and provide a label In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. -{{< /callout >}} +{{% /callout %}} These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs" >}}). diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index 4b4522ab77..e5f967a281 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -20,9 +20,9 @@ Bootstrap includes several predefined button styles, each serving its own semant <button type="button" class="btn btn-link">Link</button> {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## Disable text wrapping @@ -95,19 +95,19 @@ Disabled buttons using the `<a>` element behave a bit different: <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a> {{< /example >}} -{{< callout warning >}} +{{% callout warning %}} ##### Link functionality caveat The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether. -{{< /callout >}} +{{% /callout %}} ## Button plugin The button plugin allows you to create simple on/off toggle buttons. -{{< callout info >}} +{{% callout info %}} Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button. -{{< /callout >}} +{{% /callout %}} ### Toggle states diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index baa645be7c..ee25958eca 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -386,9 +386,9 @@ Turn an image into a card background and overlay your card's text. Depending on </div> {{< /example >}} -{{< callout info >}} +{{% callout info %}} Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image. -{{< /callout >}} +{{% /callout %}} ## Horizontal @@ -433,9 +433,9 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan {{< /card.inline >}} {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ### Border diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index c478cbfadc..bbbef9a10e 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -12,9 +12,9 @@ The carousel is a slideshow for cycling through a series of content, built with In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards. @@ -324,9 +324,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items: diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index a6109e7f3e..cbfa774f9b 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -10,9 +10,9 @@ toc: true The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element. -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} ## Example @@ -187,9 +187,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} Activates your content as a collapsible element. Accepts an optional options `object`. diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index fb200f267f..a65b653a1e 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -632,9 +632,9 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. -{{< callout info >}} +{{% callout info %}} **Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar). -{{< /callout >}} +{{% /callout %}} {{< example >}} <div class="btn-group"> @@ -817,9 +817,9 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. -{{< callout info >}} +{{% callout info %}} On touch-enabled devices, opening a dropdown 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 dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. -{{< /callout >}} +{{% /callout %}} ### Via data attributes @@ -847,11 +847,11 @@ var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { }) {{< /highlight >}} -{{< callout info >}} +{{% callout info %}} ##### `data-toggle="dropdown"` still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{{< /callout >}} +{{% /callout %}} ### Options diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index a82bdddf79..371f546efc 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -140,9 +140,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o </div> {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## With badges diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 8064999ec9..29f125fa81 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -26,9 +26,9 @@ myModal.addEventListener('shown.bs.modal', function () { }) {{< /highlight >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} Keep reading for demos and usage guidelines. @@ -888,9 +888,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} #### Passing options diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index b6c44dbbf5..88564cab12 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -17,9 +17,9 @@ Here's what you need to know before getting started with the navbar: - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set. -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} Read on for an example and list of supported sub-components. diff --git a/site/content/docs/5.0/components/navs.md b/site/content/docs/5.0/components/navs.md index ac733e64c1..a954acfde0 100644 --- a/site/content/docs/5.0/components/navs.md +++ b/site/content/docs/5.0/components/navs.md @@ -12,11 +12,11 @@ Navigation available in Bootstrap share general markup and styles, from the base The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. -{{< callout info >}} +{{% callout info %}} The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling. To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set. -{{< /callout >}} +{{% /callout %}} {{< example >}} <ul class="nav"> @@ -554,9 +554,9 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} #### constructor diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index ed7dfb1b2d..4ba9e62370 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -21,9 +21,9 @@ Things to know when using the popover plugin: - Popovers must be hidden before their corresponding elements have been removed from the DOM. - Popovers can be triggered thanks to an element inside a shadow DOM. -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} Keep reading to see how popovers work with some examples. @@ -98,11 +98,11 @@ sagittis lacus vel augue laoreet rutrum faucibus."> Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element. -{{< callout danger >}} +{{% callout danger %}} #### Specific markup required for dismiss-on-next-click For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute. -{{< /callout >}} +{{% /callout %}} {{< example >}} <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> @@ -135,7 +135,7 @@ var exampleEl = document.getElementById('example') var popover = new bootstrap.Popover(exampleEl, options) {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} ### Making popovers work for keyboard and assistive technology users To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users. @@ -143,15 +143,15 @@ To allow keyboard users to activate your popovers, you should only add them to H While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream. Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `allowList` of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead. -{{< /callout >}} +{{% /callout %}} ### Options Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. -{{< callout warning >}} +{{% callout warning %}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. -{{< /callout >}} +{{% /callout %}} <table class="table"> <thead> @@ -290,17 +290,17 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt </tbody> </table> -{{< callout info >}} +{{% callout info %}} #### Data attributes for individual popovers Options for individual popovers can alternatively be specified through the use of data attributes, as explained above. -{{< /callout >}} +{{% /callout %}} ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} #### show diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index 2e2a513345..c751587933 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -16,11 +16,11 @@ Scrollspy has a few requirements to function properly: When successfully implemented, your nav or list group will update accordingly, moving the `.active` class from one item to the next based on their associated targets. -{{< callout >}} +{{% callout %}} ### Scrollable containers and keyboard access If you're making a scrollable container (other than the `<body>`), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access. -{{< /callout >}} +{{% /callout %}} ## Example in navbar @@ -262,17 +262,17 @@ var scrollSpy = new bootstrap.ScrollSpy(document.body, { }) {{< /highlight >}} -{{< callout danger >}} +{{% callout danger %}} #### Resolvable ID targets required Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`. -{{< /callout >}} +{{% /callout %}} -{{< callout info >}} +{{% callout info %}} #### Non-visible target elements ignored Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted. -{{< /callout >}} +{{% /callout %}} ### Methods diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md index fc9cd4e57a..bcfa20ea6e 100644 --- a/site/content/docs/5.0/components/spinners.md +++ b/site/content/docs/5.0/components/spinners.md @@ -36,9 +36,9 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c {{< /spinner.inline >}} {{< /example >}} -{{< callout info >}} +{{% callout info %}} **Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that. -{{< /callout >}} +{{% /callout %}} ## Growing spinner diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 06d4fa37e8..c3a61f4646 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -16,9 +16,9 @@ Things to know when using the toast plugin: - **Please note that you are responsible for positioning toasts.** - Toasts will automatically hide if you do not specify `autohide: false`. -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} ## Examples @@ -290,9 +290,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} #### show diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index a0a6f2a189..5d38ff0b8d 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -20,9 +20,9 @@ Things to know when using the tooltip plugin: - Tooltips must be hidden before their corresponding elements have been removed from the DOM. - Tooltips can be triggered thanks to an element inside a shadow DOM. -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} Got all that? Great, let's see how they work with some examples. @@ -103,7 +103,7 @@ var exampleEl = document.getElementById('example') var tooltip = new bootstrap.Tooltip(exampleEl, options) {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} ##### Overflow `auto` and `scroll` Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`: @@ -114,17 +114,17 @@ var tooltip = new bootstrap.Tooltip(exampleEl, { boundary: 'window' }) {{< /highlight >}} -{{< /callout >}} +{{% /callout %}} ### Markup The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). -{{< callout warning >}} +{{% callout warning %}} ##### Making tooltips work for keyboard and assistive technology users You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users. -{{< /callout >}} +{{% /callout %}} {{< highlight html >}} <!-- HTML to write --> @@ -155,9 +155,9 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. -{{< callout warning >}} +{{% callout warning %}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. -{{< /callout >}} +{{% /callout %}} <table class="table"> <thead> @@ -298,17 +298,17 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt </tbody> </table> -{{< callout info >}} +{{% callout info %}} #### Data attributes for individual tooltips Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above. -{{< /callout >}} +{{% /callout %}} ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} #### show diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md index 5ba7cf087a..462c104e00 100644 --- a/site/content/docs/5.0/content/reboot.md +++ b/site/content/docs/5.0/content/reboot.md @@ -366,9 +366,9 @@ These changes, and more, are demonstrated below. </fieldset> </form> -{{< callout warning >}} +{{% callout warning %}} {{< partial "callout-warning-input-support.md" >}} -{{< /callout >}} +{{% /callout %}} ### Pointers on buttons @@ -441,10 +441,10 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o <input type="text" hidden> {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} ##### jQuery incompatibility `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. -{{< /callout >}} +{{% /callout %}} To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead. diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md index f68e79418f..de223ab193 100644 --- a/site/content/docs/5.0/content/tables.md +++ b/site/content/docs/5.0/content/tables.md @@ -68,9 +68,9 @@ Use contextual classes to color tables, table rows or individual cells. </tr> {{< /highlight >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## Accented tables @@ -618,11 +618,11 @@ You can also put the `<caption>` on the top of the table with `.caption-top`. Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`. -{{< callout warning >}} +{{% callout warning %}} ##### Vertical clipping/truncation Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. -{{< /callout >}} +{{% /callout %}} ### Always responsive diff --git a/site/content/docs/5.0/customize/components.md b/site/content/docs/5.0/customize/components.md index 6c774547a0..0773d01fa3 100644 --- a/site/content/docs/5.0/customize/components.md +++ b/site/content/docs/5.0/customize/components.md @@ -64,14 +64,14 @@ In your CSS, you'd have something like the following where the bulk of the styli For the callouts, that unique styling is just a `border-left-color`. When you combine that base class with one of those modifier classes, you get your complete component family: -{{< callout info >}} +{{% callout info %}} **This is an info callout.** Example text to show it in action. -{{< /callout >}} +{{% /callout %}} -{{< callout warning >}} +{{% callout warning %}} **This is a warning callout.** Example text to show it in action. -{{< /callout >}} +{{% /callout %}} -{{< callout danger >}} +{{% callout danger %}} **This is a danger callout.** Example text to show it in action. -{{< /callout >}} +{{% /callout %}} diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md index ae89f5ee34..fe99828eac 100644 --- a/site/content/docs/5.0/forms/checks-radios.md +++ b/site/content/docs/5.0/forms/checks-radios.md @@ -232,9 +232,9 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th <label class="btn btn-primary" for="btn-check-3">Disabled</label> {{< /example >}} -{{< callout info >}} +{{% callout info %}} Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button. -{{< /callout >}} +{{% /callout %}} ### Radio toggle buttons diff --git a/site/content/docs/5.0/forms/file.md b/site/content/docs/5.0/forms/file.md index 466e7b0950..7222b70590 100644 --- a/site/content/docs/5.0/forms/file.md +++ b/site/content/docs/5.0/forms/file.md @@ -6,9 +6,9 @@ group: forms toc: true --- -{{< callout info >}} +{{% callout info %}} The recommended plugin to animate custom file inputs is [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input); it's what we use here in our docs. -{{< /callout >}} +{{% /callout %}} ## Default diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md index a181c34dd4..3e2cbc2bcf 100644 --- a/site/content/docs/5.0/forms/overview.md +++ b/site/content/docs/5.0/forms/overview.md @@ -55,11 +55,11 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for Block-level or inline-level form text can be created using `.form-text`. -{{< callout warning >}} +{{% callout warning %}} ##### Associating form text with form controls Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. -{{< /callout >}} +{{% /callout %}} Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md index 65b8652031..86c977bb29 100644 --- a/site/content/docs/5.0/forms/validation.md +++ b/site/content/docs/5.0/forms/validation.md @@ -9,9 +9,9 @@ extra_js: async: true --- -{{< callout warning >}} +{{% callout warning %}} We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we'd recommend either using the server-side option or the default browser validation method. -{{< /callout >}} +{{% /callout %}} ## How it works diff --git a/site/content/docs/5.0/getting-started/best-practices.md b/site/content/docs/5.0/getting-started/best-practices.md index e17fc1290a..24234e84c4 100644 --- a/site/content/docs/5.0/getting-started/best-practices.md +++ b/site/content/docs/5.0/getting-started/best-practices.md @@ -7,9 +7,9 @@ group: getting-started We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves. -{{< callout info >}} +{{% callout info %}} **Heads up!** This copy is a work in progress. -{{< /callout >}} +{{% /callout %}} ### General outline diff --git a/site/content/docs/5.0/getting-started/javascript.md b/site/content/docs/5.0/getting-started/javascript.md index 38b2266234..8362203630 100644 --- a/site/content/docs/5.0/getting-started/javascript.md +++ b/site/content/docs/5.0/getting-started/javascript.md @@ -25,11 +25,11 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst </script> {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} ## Incompatible plugins Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a `<script>` tag with `module` type because they depend on Popper.js. For more information about the issue see [here](https://v8.dev/features/modules#specifiers). -{{< /callout >}} +{{% /callout %}} ## Dependencies @@ -45,12 +45,12 @@ Bootstrap 5 is designed to be used without jQuery, but it's still possible to us Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.) -{{< callout warning >}} +{{% callout warning %}} ## Selectors Currently to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use [valid selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). If you use special selectors, for example: `collapse:Example` be sure to escape them. -{{< /callout >}} +{{% /callout %}} ## Events @@ -68,7 +68,7 @@ myModal.addEventListener('show.bs.modal', function (e) { }) {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} ## jQuery events Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`. @@ -78,7 +78,7 @@ $('#myTab a').on('shown.bs.tab', function () { // do something... }) {{< /highlight >}} -{{< /callout >}} +{{% /callout %}} ## Programmatic API @@ -151,11 +151,11 @@ bootstrap.Tooltip.VERSION // => "{{< param current_version >}}" Bootstrap's plugins don't fall back particularly gracefully 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. -{{< callout warning >}} +{{% callout warning %}} ##### Third-party libraries **Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own. -{{< /callout >}} +{{% /callout %}} ## Sanitizer diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index e46d28279e..dfa22373eb 100644 --- a/site/content/docs/5.0/helpers/ratio.md +++ b/site/content/docs/5.0/helpers/ratio.md @@ -12,9 +12,9 @@ Use the ratio helper to manage the aspect ratios of external content like `<ifra Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios). -{{< callout info >}} +{{% callout info %}} **Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}). -{{< /callout >}} +{{% /callout %}} ## Example diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md index 9dad5c0cff..6c41bf2a79 100644 --- a/site/content/docs/5.0/layout/breakpoints.md +++ b/site/content/docs/5.0/layout/breakpoints.md @@ -164,9 +164,9 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us // No media query since the xxl breakpoint has no upper bound on its width {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} {{< partial "callout-info-mediaqueries-breakpoints.md" >}} -{{< /callout >}} +{{% /callout %}} ### Single breakpoint diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md index b9f54f2e1a..03928655cc 100644 --- a/site/content/docs/5.0/layout/columns.md +++ b/site/content/docs/5.0/layout/columns.md @@ -6,9 +6,9 @@ group: layout toc: true --- -{{< callout info >}} +{{% callout info %}} **Heads up!** Be sure to [read the Grid page]({{< docsref "/layout/grid" >}}) first before diving into how to modify and customize your grid columns. -{{< /callout >}} +{{% /callout %}} ## How they work diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index fa25e52d5b..0237626d53 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -10,9 +10,9 @@ toc: true Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together. -{{< callout info >}} +{{% callout info %}} **New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets. -{{< /callout >}} +{{% /callout %}} {{< example class="bd-example-row" >}} <div class="container"> diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index 65cddd75cb..b2321c6d45 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -6,15 +6,15 @@ group: utilities toc: true --- -{{< callout info >}} +{{% callout info %}} ##### Dealing with specificity Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class. -{{< /callout >}} +{{% /callout %}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## Color diff --git a/site/content/docs/5.0/utilities/interactions.md b/site/content/docs/5.0/utilities/interactions.md index 8909e85587..0049bb3ed9 100644 --- a/site/content/docs/5.0/utilities/interactions.md +++ b/site/content/docs/5.0/utilities/interactions.md @@ -26,6 +26,6 @@ Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element i <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p> {{< /example >}} -{{< callout warning >}} +{{% callout warning %}} The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the `disabled` HTML attribute instead. -{{< /callout >}}
\ No newline at end of file +{{% /callout %}}
\ No newline at end of file diff --git a/site/content/docs/5.0/utilities/text.md b/site/content/docs/5.0/utilities/text.md index aad34a35de..1409a12ffd 100644 --- a/site/content/docs/5.0/utilities/text.md +++ b/site/content/docs/5.0/utilities/text.md @@ -21,9 +21,9 @@ Easily realign text to components with text alignment classes. For left, right, <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> {{< /example >}} -{{< callout info >}} +{{% callout info %}} 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 >}} +{{% /callout %}} ## Text wrapping and overflow diff --git a/site/content/docs/5.0/utilities/visibility.md b/site/content/docs/5.0/utilities/visibility.md index 83bce16240..66475185c9 100644 --- a/site/content/docs/5.0/utilities/visibility.md +++ b/site/content/docs/5.0/utilities/visibility.md @@ -7,9 +7,9 @@ group: utilities Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page. -{{< callout warning >}} +{{% callout warning %}} Elements with the `.invisible` class will be hidden *both* visually and for assistive technology/screen reader users. -{{< /callout >}} +{{% /callout %}} Apply `.visible` or `.invisible` as needed. diff --git a/site/layouts/shortcodes/callout.html b/site/layouts/shortcodes/callout.html index 007f8a8e8e..e02be33def 100644 --- a/site/layouts/shortcodes/callout.html +++ b/site/layouts/shortcodes/callout.html @@ -6,5 +6,5 @@ {{- $css_class := .Get 0 | default "info" -}} <div class="bd-callout bd-callout-{{ $css_class }}"> -{{ .Inner | markdownify }} +{{ .Inner }} </div> |