diff options
Diffstat (limited to 'site/content')
40 files changed, 536 insertions, 514 deletions
diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md index 227d11a..8b22686 100644 --- a/site/content/docs/5.3/components/accordion.md +++ b/site/content/docs/5.3/components/accordion.md @@ -11,7 +11,7 @@ toc: true ## How it works -The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`. +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. {{< callout info >}} {{< partial "callouts/info-prefersreducedmotion.md" >}} @@ -21,6 +21,10 @@ The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally Click the accordions below to expand/collapse the accordion content. +To render an accordion that's expanded by default: +- add the `.show` class on the `.accordion-collapse` element. +- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`. + {{< example >}} <div class="accordion" id="accordionExample"> <div class="accordion-item"> diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md index 9eb64df..6103898 100644 --- a/site/content/docs/5.3/components/alerts.md +++ b/site/content/docs/5.3/components/alerts.md @@ -162,13 +162,11 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS {{< deprecated-in "5.3.0" >}} -Used in combination with `$theme-colors` to create contextual modifier classes for our alerts. - {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} ### Sass loops -Loop that generates the modifier classes with the `alert-variant()` mixin. +Loop that generates the modifier classes with an overriding of CSS variables. {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md index c073878..56ade49 100644 --- a/site/content/docs/5.3/components/badge.md +++ b/site/content/docs/5.3/components/badge.md @@ -13,12 +13,12 @@ Badges scale to match the size of the immediate parent element by using relative ### Headings {{< example >}} -<h1>Example heading <span class="badge bg-secondary">New</span></h1> -<h2>Example heading <span class="badge bg-secondary">New</span></h2> -<h3>Example heading <span class="badge bg-secondary">New</span></h3> -<h4>Example heading <span class="badge bg-secondary">New</span></h4> -<h5>Example heading <span class="badge bg-secondary">New</span></h5> -<h6>Example heading <span class="badge bg-secondary">New</span></h6> +<h1>Example heading <span class="badge text-bg-secondary">New</span></h1> +<h2>Example heading <span class="badge text-bg-secondary">New</span></h2> +<h3>Example heading <span class="badge text-bg-secondary">New</span></h3> +<h4>Example heading <span class="badge text-bg-secondary">New</span></h4> +<h5>Example heading <span class="badge text-bg-secondary">New</span></h5> +<h6>Example heading <span class="badge text-bg-secondary">New</span></h6> {{< /example >}} ### Buttons diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 6138c3d..c504fef 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -63,7 +63,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t ### Images -`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. +`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card's borders. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. {{< example >}} <div class="card" style="width: 18rem;"> diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 598bb38..7f7e145 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -117,21 +117,21 @@ These work great with custom content as well. <div class="fw-bold">Subheading</div> Content for list item </div> - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> Content for list item </div> - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> Content for list item </div> - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> </ol> {{< /example >}} @@ -200,15 +200,15 @@ Add badges to any list group item to show unread counts, activity, and more with <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> A list item - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> A second list item - <span class="badge bg-primary rounded-pill">2</span> + <span class="badge text-bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> A third list item - <span class="badge bg-primary rounded-pill">1</span> + <span class="badge text-bg-primary rounded-pill">1</span> </li> </ul> {{< /example >}} @@ -321,8 +321,6 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca {{< deprecated-in "5.3.0" >}} -Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s. - {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}} ### Sass loops diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index ba2a51a..3ca7cc4 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -218,7 +218,7 @@ When modals become too long for the user's viewport or device, they scroll indep </button> </div> -You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`. +You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`. <div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable"> diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md index 7c4c862..ac257df 100644 --- a/site/content/docs/5.3/components/offcanvas.md +++ b/site/content/docs/5.3/components/offcanvas.md @@ -144,7 +144,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. {{< callout warning >}} -Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. +**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. {{< /callout >}} {{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}} @@ -328,6 +328,7 @@ const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas') {{< bs-table "table" >}} | Method | Description | | --- | --- | +| `dispose` | Destroys an element's offcanvas. | | `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. | | `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). | diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md index 0a2138d..f4697a7 100644 --- a/site/content/docs/5.3/components/popovers.md +++ b/site/content/docs/5.3/components/popovers.md @@ -198,7 +198,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. | | `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. | | `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). **Note**: `title` attribute must not be used as a selector. | -| `template` | string | `'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | 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"`. | +| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | 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="tooltip"`. | | `title` | string, element, function | `''` | The popover title. 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 | `'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. | {{< /bs-table >}} @@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, { const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance // setContent example -myPopover.setContent({ +popover.setContent({ '.popover-header': 'another title', '.popover-body': 'another content' }) diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md index ef2bd13..1400e8c 100644 --- a/site/content/docs/5.3/content/reboot.md +++ b/site/content/docs/5.3/content/reboot.md @@ -64,7 +64,7 @@ $font-family-sans-serif: // Android Roboto, // older macOS and iOS - "Helvetica Neue" + "Helvetica Neue", // Linux "Noto Sans", "Liberation Sans", diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index b75b233..3d3583c 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -549,7 +549,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `. <div class="bd-example"> <table class="table"> - <thead class="table-light"> + <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index 6a3c323..d42c636 100644 --- a/site/content/docs/5.3/customize/color.md +++ b/site/content/docs/5.3/customize/color.md @@ -18,341 +18,343 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` **Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6. {{< /callout >}} -<table class="table table-swatches"> - <thead> - <tr> - <th style="width: 340px;">Description</th> - <th style="width: 200px;" class="ps-0">Swatch</th> - <th>Variables</th> - </tr> - </thead> - <tbody> - <tr> - <td rowspan="2"> - {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </div> - </td> - <td> - {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="2"> - {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"> </div> - </td> - <td> - {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="2"> - {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"> </div> - </td> - <td> - {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-primary"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-success"> </div> - </td> - <td> - {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-danger"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-warning"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-info"> </div> - </td> - <td> - {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-light"> </div> - </td> - <td> - {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-dark"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} - </td> - </tr> - </tbody> -</table> +<div class="table-responsive"> + <table class="table table-swatches"> + <thead> + <tr> + <th style="width: 340px;">Description</th> + <th style="width: 200px;" class="ps-0">Swatch</th> + <th>Variables</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </div> + </td> + <td> + {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="2"> + {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"> </div> + </td> + <td> + {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="2"> + {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"> </div> + </td> + <td> + {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-primary"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-success"> </div> + </td> + <td> + {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-danger"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-warning"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-info"> </div> + </td> + <td> + {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-light"> </div> + </td> + <td> + {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-dark"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} + </td> + </tr> + </tbody> + </table> +</div> ### Using the new colors diff --git a/site/content/docs/5.3/customize/sass.md b/site/content/docs/5.3/customize/sass.md index ceadf3a..a2b2bb2 100644 --- a/site/content/docs/5.3/customize/sass.md +++ b/site/content/docs/5.3/customize/sass.md @@ -244,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect. +`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative. + {{< scss-docs name="color-functions" file="scss/_functions.scss" >}} In practice, you'd call the function and pass in the color and weight parameters. @@ -256,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters .custom-element-2 { color: shade-color($danger, 30%); } + +.custom-element-3 { + color: shift-color($success, 40%); + background-color: shift-color($success, -60%); +} ``` ### Color contrast @@ -338,18 +345,18 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a ### Color schemes -A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. {{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}} ```scss .custom-element { - @include color-scheme(dark) { - // Insert dark mode styles here + @include color-scheme(light) { + // Insert light mode styles here } - @include color-scheme(custom-named-scheme) { - // Insert custom color scheme styles here + @include color-scheme(dark) { + // Insert dark mode styles here } } ``` diff --git a/site/content/docs/5.3/examples/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html index 97d9913..666b748 100644 --- a/site/content/docs/5.3/examples/blog-rtl/index.html +++ b/site/content/docs/5.3/examples/blog-rtl/index.html @@ -192,7 +192,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">مثال على عنوان منشور المدونة</h6> - <small class="text-body-secondary">15 يناير 2023</small> + <small class="text-body-secondary">15 يناير 2024</small> </div> </a> </li> @@ -201,7 +201,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">هذا عنوان آخر للمدونة</h6> - <small class="text-body-secondary">14 يناير 2023</small> + <small class="text-body-secondary">14 يناير 2024</small> </div> </a> </li> @@ -210,7 +210,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6> - <small class="text-body-secondary">13 يناير 2023</small> + <small class="text-body-secondary">13 يناير 2024</small> </div> </a> </li> diff --git a/site/content/docs/5.3/examples/blog/blog.css b/site/content/docs/5.3/examples/blog/blog.css index ddbca5a..86eedaf 100644 --- a/site/content/docs/5.3/examples/blog/blog.css +++ b/site/content/docs/5.3/examples/blog/blog.css @@ -1,4 +1,4 @@ -/* stylelint-disable stylistic/selector-list-comma-newline-after */ +/* stylelint-disable @stylistic/selector-list-comma-newline-after */ .blog-header-logo { font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; diff --git a/site/content/docs/5.3/examples/blog/blog.rtl.css b/site/content/docs/5.3/examples/blog/blog.rtl.css index 043d4e6..bd0c9d1 100644 --- a/site/content/docs/5.3/examples/blog/blog.rtl.css +++ b/site/content/docs/5.3/examples/blog/blog.rtl.css @@ -1,4 +1,4 @@ -/* stylelint-disable stylistic/selector-list-comma-newline-after */ +/* stylelint-disable @stylistic/selector-list-comma-newline-after */ .blog-header-logo { font-family: Amiri, Georgia, "Times New Roman", serif; diff --git a/site/content/docs/5.3/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html index 993c84e..3953591 100644 --- a/site/content/docs/5.3/examples/blog/index.html +++ b/site/content/docs/5.3/examples/blog/index.html @@ -244,7 +244,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">Example blog post title</h6> - <small class="text-body-secondary">January 15, 2023</small> + <small class="text-body-secondary">January 15, 2024</small> </div> </a> </li> @@ -253,7 +253,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">This is another blog post title</h6> - <small class="text-body-secondary">January 14, 2023</small> + <small class="text-body-secondary">January 14, 2024</small> </div> </a> </li> @@ -262,7 +262,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6> - <small class="text-body-secondary">January 13, 2023</small> + <small class="text-body-secondary">January 13, 2024</small> </div> </a> </li> diff --git a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html index 9fd24e2..eeb825f 100644 --- a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html @@ -23,7 +23,7 @@ direction: rtl <nav class="small" id="toc"> <ul class="list-unstyled"> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button> <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li> @@ -32,7 +32,7 @@ direction: rtl </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button> <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">نظرة عامة</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">الحقول المعطلة</a></li> @@ -43,7 +43,7 @@ direction: rtl </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button> <ul class="list-unstyled ps-3 collapse" id="components-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li> diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html index 4c96bc0..cbe2b74 100644 --- a/site/content/docs/5.3/examples/cheatsheet/index.html +++ b/site/content/docs/5.3/examples/cheatsheet/index.html @@ -22,7 +22,7 @@ body_class: "bg-body-tertiary" <nav class="small" id="toc"> <ul class="list-unstyled"> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button> <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li> @@ -31,7 +31,7 @@ body_class: "bg-body-tertiary" </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button> <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li> @@ -42,7 +42,7 @@ body_class: "bg-body-tertiary" </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button> <ul class="list-unstyled ps-3 collapse" id="components-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li> diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html index 6fb4a63..ffdd9d1 100644 --- a/site/content/docs/5.3/examples/dashboard-rtl/index.html +++ b/site/content/docs/5.3/examples/dashboard-rtl/index.html @@ -3,11 +3,11 @@ layout: examples title: قالب لوحة القيادة direction: rtl extra_css: - - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" + - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" - "../dashboard/dashboard.rtl.css" extra_js: - - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" - integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" + - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" + integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" - src: "dashboard.js" --- diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html index db84bd6..d060048 100644 --- a/site/content/docs/5.3/examples/dashboard/index.html +++ b/site/content/docs/5.3/examples/dashboard/index.html @@ -2,11 +2,11 @@ layout: examples title: Dashboard Template extra_css: - - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" + - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" - "dashboard.css" extra_js: - - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" - integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" + - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" + integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" - src: "dashboard.js" --- diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg Binary files differindex ed2e36a..283acd0 100644 --- a/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg +++ b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg Binary files differindex b66864a..81eae64 100644 --- a/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg +++ b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg Binary files differindex c411b17..0f401d1 100644 --- a/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg +++ b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg diff --git a/site/content/docs/5.3/examples/heroes/bootstrap-docs.png b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png Binary files differindex 471a9ed..a4e9b98 100644 --- a/site/content/docs/5.3/examples/heroes/bootstrap-docs.png +++ b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png diff --git a/site/content/docs/5.3/examples/product/index.html b/site/content/docs/5.3/examples/product/index.html index 0b245bd..fd4d498 100644 --- a/site/content/docs/5.3/examples/product/index.html +++ b/site/content/docs/5.3/examples/product/index.html @@ -24,12 +24,12 @@ extra_css: <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> Aperture </a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="#offcanvas" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <div class="offcanvas offcanvas-end" tabindex="-1" id="#offcanvas" aria-labelledby="#offcanvasLabel"> + <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"> <div class="offcanvas-header"> - <h5 class="offcanvas-title" id="#offcanvasLabel">Aperture</h5> + <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> diff --git a/site/content/docs/5.3/examples/starter-template/index.html b/site/content/docs/5.3/examples/starter-template/index.html index 51503f1..ec8e57d 100644 --- a/site/content/docs/5.3/examples/starter-template/index.html +++ b/site/content/docs/5.3/examples/starter-template/index.html @@ -34,7 +34,7 @@ title: Starter Template <div class="row g-5"> <div class="col-md-6"> <h2 class="text-body-emphasis">Starter projects</h2> - <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> + <p>Ready to go beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> <ul class="list-unstyled ps-0"> <li> <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank"> diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index a18ab38..fe1ed94 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -305,7 +305,7 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg ### Outlined styles -Different variants of `.btn`, such at the various outlined styles, are supported. +Different variants of `.btn`, such as the various outlined styles, are supported. {{< example >}} <input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off"> diff --git a/site/content/docs/5.3/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md index a1b8bfd..f813e48 100644 --- a/site/content/docs/5.3/getting-started/download.md +++ b/site/content/docs/5.3/getting-started/download.md @@ -50,6 +50,24 @@ If you're using our compiled JavaScript and prefer to include Popper separately, <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script> ``` +### Alternative CDNs + +We recommend [jsDelivr](https://www.jsdelivr.com/) and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like [cdnjs](https://cdnjs.com/) or [unpkg](https://unpkg.com/). + +You'll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap. + +{{< callout warning>}} +**If the SRI hashes differ for a given file, you shouldn't use the files from that CDN, because it means that the file was modified by someone else.** +{{< /callout >}} + +Note that you should compare same length hashes, e.g. `sha384` with `sha384`, otherwise it's expected for them to be different. +As such, you can use an online tool like [SRI Hash Generator](https://www.srihash.org/) to make sure that the hashes are the same for a given file. +Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example: + +```sh +openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A +``` + ## Package managers Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md index d296d18..538d319 100644 --- a/site/content/docs/5.3/getting-started/introduction.md +++ b/site/content/docs/5.3/getting-started/introduction.md @@ -75,20 +75,14 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co ## Next steps - Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes. - - Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below. - - Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}). - - Looking to use Bootstrap as a module with `<script type="module">`? Please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section. ## JS components -Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template. +Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template. -<details> -<summary class="bd-summary-link mb-3">Show components requiring JavaScript</summary> -{{< markdown >}} - Alerts for dismissing - Buttons for toggling states and checkbox/radio functionality - Carousel for all slide behaviors, controls, and indicators @@ -101,8 +95,6 @@ Curious which components explicitly require our JavaScript and Popper? Click the - Scrollspy for scroll behavior and navigation updates - Toasts for displaying and dismissing - Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/)) -{{< /markdown >}} -</details> ## Important globals @@ -154,7 +146,8 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources. - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}). -- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). +- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). +- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap). - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel. - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). - Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability. diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md index 80c222f..afa4ccd 100644 --- a/site/content/docs/5.3/getting-started/javascript.md +++ b/site/content/docs/5.3/getting-started/javascript.md @@ -22,7 +22,8 @@ A better alternative for those using this type of frameworks is to use a framewo {{< callout >}} **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx). {{< /callout >}} -- Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4) +- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4) +- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) ## Using Bootstrap as a module diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md index 36619e7..a987b45 100644 --- a/site/content/docs/5.3/getting-started/parcel.md +++ b/site/content/docs/5.3/getting-started/parcel.md @@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-parcel@2x.png ## Setup -We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. +We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. -1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. +1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. ```sh mkdir my-project && cd my-project @@ -148,7 +148,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap"> diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md index 9c2be9f..33b76d3 100644 --- a/site/content/docs/5.3/getting-started/vite.md +++ b/site/content/docs/5.3/getting-started/vite.md @@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-vite@2x.png ## Setup -We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. +We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. -1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. +1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. ```sh mkdir my-project && cd my-project @@ -42,7 +42,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre npm i --save-dev sass ``` -Now that we have all the necessary dependencies installed and setup, we can get to work creating the project files and importing Bootstrap. +Now that we have all the necessary dependencies installed and set up, we can get to work creating the project files and importing Bootstrap. ## Project structure @@ -78,10 +78,10 @@ With dependencies installed and our project folder ready for us to start coding, <!-- eslint-skip --> ```js - const path = require('path') + import { resolve } from 'path' export default { - root: path.resolve(__dirname, 'src'), + root: resolve(__dirname, 'src'), build: { outDir: '../dist' }, @@ -170,7 +170,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap"> diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md index 0709b7a..39adaf6 100644 --- a/site/content/docs/5.3/getting-started/webpack.md +++ b/site/content/docs/5.3/getting-started/webpack.md @@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-webpack@2x.png ## Setup -We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. +We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. -1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. +1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. ```sh mkdir my-project && cd my-project @@ -242,7 +242,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap"> diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md index caa2c67..ffe4341 100644 --- a/site/content/docs/5.3/helpers/stacks.md +++ b/site/content/docs/5.3/helpers/stacks.md @@ -10,7 +10,7 @@ added: "5.1" Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/). {{< callout warning >}} -Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap). +**Heads up!** Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap). {{< /callout >}} ## Vertical diff --git a/site/content/docs/5.3/layout/gutters.md b/site/content/docs/5.3/layout/gutters.md index a5b0772..0cb35a9 100644 --- a/site/content/docs/5.3/layout/gutters.md +++ b/site/content/docs/5.3/layout/gutters.md @@ -139,7 +139,7 @@ The gutters between columns in our predefined grid classes can be removed with ` **Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid` and add `.mx-0` to the `.row` to prevent overflow. -In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more). +In practice, here's how it looks. Note that you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more). {{< example class="bd-example-row" >}} <div class="row g-0 text-center"> diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index ab486c6..d839f76 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -152,13 +152,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Alert variants are now styled via CSS variables. -- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### List group - List group item variants are now styled via CSS variables. -- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `list-group-item-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### Dropdowns @@ -349,20 +349,22 @@ For a complete list of changes, [see the v5.2.0 project on GitHub](https://githu Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/) -<hr class="my-5"> +## v5.0.0 + +<hr class="mb-4"> {{< callout info >}} **Hey there!** Changes to our first major release of Bootstrap 5, v5.0.0, are documented below. They don't reflect the additional changes shown above. {{< /callout >}} -## Dependencies +### Dependencies - Dropped jQuery. - Upgraded from Popper v1.x to Popper v2.x. - Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated. - Migrated from Jekyll to Hugo for building our documentation -## Browser support +### Browser support - Dropped Internet Explorer 10 and 11 - Dropped Microsoft Edge < 16 (Legacy Edge) @@ -373,7 +375,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co <hr class="my-5"> -## Documentation changes +### Documentation changes - Redesigned homepage, docs layout, and footer. - Added [new Parcel guide]({{< docsref "/getting-started/parcel" >}}). @@ -385,29 +387,29 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions. - Added new keyboard shortcut for the search field: <kbd><kbd>Ctrl</kbd> + <kbd>/</kbd></kbd>. -## Sass +### Sass - We've ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}). -- <span class="badge bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ color space. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/) +- <span class="badge text-bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ color space. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/) - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`. - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`. -- <span class="badge bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach. +- <span class="badge text-bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach. - `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than `lg`). - - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`). + - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`). -- <span class="badge bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339). +- <span class="badge text-bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339). -- <span class="badge bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083). +- <span class="badge text-bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083). -- <span class="badge bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`. +- <span class="badge text-bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`. -- <span class="badge bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity. +- <span class="badge text-bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity. -- <span class="badge bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes. +- <span class="badge text-bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes. -- <span class="badge bg-danger">Breaking</span> **Removed previously deprecated mixins:** +- <span class="badge text-bg-danger">Breaking</span> **Removed previously deprecated mixins:** - `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active` - `float()` - `form-control-mixin()` @@ -417,13 +419,13 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - `visibility()` - `form-control-focus()` -- <span class="badge bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. +- <span class="badge text-bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. - `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. [See #30394](https://github.com/twbs/bootstrap/pull/30394). - The `border-radius()` mixin now has a default value. -## Color system +### Color system - The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details. @@ -433,31 +435,31 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately. -## Grid updates +### Grid updates - **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints. - **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities. - Added new [gutter class]({{< docsref "/layout/gutters" >}}) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters. - - <span class="badge bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities. + - <span class="badge text-bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities. - Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior. -- <span class="badge bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box. +- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box. -- <span class="badge bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). +- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). -- <span class="badge bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference. +- <span class="badge text-bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference. - `$enable-grid-classes` no longer disables the generation of container classes anymore. [See #29146.](https://github.com/twbs/bootstrap/pull/29146) - Updated the `make-col` mixin to default to equal columns without a specified size. -## Content, Reboot, etc +### Content, Reboot, etc - **[RFS]({{< docsref "/getting-started/rfs" >}}) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._ -- <span class="badge bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s. +- <span class="badge text-bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s. - Added two new `.display-*` heading sizes, `.display-5` and `.display-6`. @@ -465,35 +467,35 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling. -- <span class="badge bg-danger">Breaking</span> Nested tables do not inherit styles anymore. +- <span class="badge text-bg-danger">Breaking</span> Nested tables do not inherit styles anymore. -- <span class="badge bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`). +- <span class="badge text-bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`). -- <span class="badge bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables. +- <span class="badge text-bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables. - Split table cell padding variables into `-y` and `-x`. -- <span class="badge bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135) +- <span class="badge text-bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135) -- <span class="badge bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267) +- <span class="badge text-bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267) -- <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793) +- <span class="badge text-bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793) -- <span class="badge bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~ +- <span class="badge text-bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~ - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`. - Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877) -## RTL +### RTL - Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` in lieu of `left` and `right`. -## Forms +### Forms - **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}}) -- <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML. +- <span class="badge text-bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML. - `.custom-control.custom-checkbox` is now `.form-check`. - `.custom-control.custom-radio` is now `.form-check`. - `.custom-control.custom-switch` is now `.form-check.form-switch`. @@ -502,15 +504,15 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - `.custom-range` is now `.form-range`. - Dropped native `.form-control-file` and `.form-control-range`. -- <span class="badge bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. +- <span class="badge text-bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. - The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation. -- <span class="badge bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`. +- <span class="badge text-bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`. -- <span class="badge bg-danger">Breaking</span> Form labels now require `.form-label`. +- <span class="badge text-bg-danger">Breaking</span> Form labels now require `.form-label`. -- <span class="badge bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element. +- <span class="badge text-bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element. - Form controls no longer used fixed `height` when possible, instead deferring to `min-height` to improve customization and compatibility with other components. @@ -520,41 +522,41 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co <hr class="my-5"> -## Components +### Components - Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564). -### Accordion +#### Accordion - Added [new accordion component]({{< docsref "/components/accordion" >}}). -### Alerts +#### Alerts - Alerts now have [examples with icons]({{< docsref "/components/alerts#icons" >}}). - Removed custom styles for `<hr>`s in each alert since they already use `currentColor`. -### Badges +#### Badges -- <span class="badge bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`). +- <span class="badge text-bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`). -- <span class="badge bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead. +- <span class="badge text-bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead. -- <span class="badge bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements. +- <span class="badge text-bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements. - Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`. -### Breadcrumbs +#### Breadcrumbs - Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`. - Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS. -### Buttons +#### Buttons -- <span class="badge bg-danger">Breaking</span> **[Toggle buttons]({{< docsref "/forms/checks-radios#toggle-buttons" >}}), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._ +- <span class="badge text-bg-danger">Breaking</span> **[Toggle buttons]({{< docsref "/forms/checks-radios#toggle-buttons" >}}), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._ -- <span class="badge bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]({{< docsref "/components/buttons#block-buttons" >}}) +- <span class="badge text-bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]({{< docsref "/components/buttons#block-buttons" >}}) - Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters. @@ -562,33 +564,33 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Disabled buttons now have `pointer-events: none;`. -### Card +#### Card -- <span class="badge bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment). +- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment). -- <span class="badge bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922). +- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922). -- <span class="badge bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}). +- <span class="badge text-bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}). -### Carousel +#### Carousel - Added new [`.carousel-dark` variant]({{< docsref "/components/carousel#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds). - Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]({{< param "icons" >}}). -### Close button +#### Close button -- <span class="badge bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name. - Close buttons now use a `background-image` (embedded SVG) instead of a `×` in the HTML, allowing for easier customization without the need to touch your markup. - Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds. -### Collapse +#### Collapse - Removed scroll anchoring for accordions. -### Dropdowns +#### Dropdowns - Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns. @@ -596,56 +598,56 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Darkened the dropdown divider for improved contrast. -- <span class="badge bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. +- <span class="badge text-bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. - Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static, or dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning. -- <span class="badge bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. +- <span class="badge text-bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. - Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive. - Dropdowns now support `.dropdown-item`s wrapped in `<li>`s. -### Jumbotron +#### Jumbotron -- <span class="badge bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]({{< docsref "/examples/jumbotron" >}}) +- <span class="badge text-bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]({{< docsref "/examples/jumbotron" >}}) -### List group +#### List group - Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups. -### Navs and tabs +#### Navs and tabs - Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class. -### Navbars +#### Navbars -- <span class="badge bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required). -- <span class="badge bg-danger">Breaking</span> The `.active` class can no longer be applied to `.nav-item`s, it must be applied directly on `.nav-link`s. +- <span class="badge text-bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required). +- <span class="badge text-bg-danger">Breaking</span> The `.active` class can no longer be applied to `.nav-item`s, it must be applied directly on `.nav-link`s. -### Offcanvas +#### Offcanvas - Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}). -### Pagination +#### Pagination - Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another. - Added `transition`s to pagination links. -### Popovers +#### Popovers -- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template. - Renamed `whiteList` option to `allowList`. -### Spinners +#### Spinners - Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882). - Improved spinner vertical alignment. -### Toasts +#### Toasts - Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}). @@ -653,18 +655,17 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions. -### Tooltips +#### Tooltips -- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template. -- <span class="badge bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements. +- <span class="badge text-bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements. -- <span class="badge bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`. +- <span class="badge text-bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`. -## Utilities +### Utilities -- <span class="badge bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support: - - Renamed `.left-*` and `.right-*` to `.start-*` and `.end-*`. +- <span class="badge text-bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support: - Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`. - Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`. - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`. @@ -672,7 +673,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`. - Renamed `.text-*-left` and `.text-*-right` to `.text-*-start` and `.text-*-end`. -- <span class="badge bg-danger">Breaking</span> Disabled negative margins by default. +- <span class="badge text-bg-danger">Breaking</span> Disabled negative margins by default. - Added new `.bg-body` class for quickly setting the `<body>`'s background to additional elements. @@ -682,19 +683,19 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Added new [`border-width` utilities]({{< docsref "/utilities/borders#border-width" >}}). -- <span class="badge bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`. -- <span class="badge bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore. +- <span class="badge text-bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore. - Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map. -- <span class="badge bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency. -- <span class="badge bg-danger">Breaking</span> Renamed `.font-italic` utility to `.fst-italic` for brevity and consistency with new `.fst-normal` utility. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-italic` utility to `.fst-italic` for brevity and consistency with new `.fst-normal` utility. - Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts. -- <span class="badge bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687). +- <span class="badge text-bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687). - Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}). @@ -702,26 +703,26 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`. -## Helpers +### Helpers -- <span class="badge bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable. +- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable. - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`. - We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element. - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair. - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}). -- <span class="badge bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).** +- <span class="badge text-bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).** - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss` - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable` - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`. - `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore. -## JavaScript +### JavaScript - **Dropped jQuery dependency** and rewrote plugins to be in regular JavaScript. -- <span class="badge bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`. +- <span class="badge text-bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`. - **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin: diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index c17ed84..1239261 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -22,12 +22,11 @@ Background utilities like `.bg-*` that generated from our original `$theme-color {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div> -<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div> +<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div> {{- end -}} {{< /colors.inline >}} -<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p> -<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p> - +<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div> +<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div> <div class="p-3 mb-2 bg-body text-body">.bg-body</div> <div class="p-3 mb-2 bg-black text-white">.bg-black</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> diff --git a/site/content/docs/5.3/utilities/position.md b/site/content/docs/5.3/utilities/position.md index a2ef4ec..76df926 100644 --- a/site/content/docs/5.3/utilities/position.md +++ b/site/content/docs/5.3/utilities/position.md @@ -90,7 +90,7 @@ Here are some real life examples of these classes: {{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}} <button type="button" class="btn btn-primary position-relative"> - Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span> + Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span> </button> <div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill"> diff --git a/site/content/docs/5.3/utilities/text.md b/site/content/docs/5.3/utilities/text.md index 95fe06b..68b516a 100644 --- a/site/content/docs/5.3/utilities/text.md +++ b/site/content/docs/5.3/utilities/text.md @@ -31,7 +31,7 @@ Note that we don't provide utility classes for justified text. While, aesthetica Wrap text with a `.text-wrap` class. {{< example >}} -<div class="badge bg-primary text-wrap" style="width: 6rem;"> +<div class="badge text-bg-primary text-wrap" style="width: 6rem;"> This text should wrap. </div> {{< /example >}} diff --git a/site/content/docs/versions.md b/site/content/docs/versions.md index 312decc..c420de2 100644 --- a/site/content/docs/versions.md +++ b/site/content/docs/versions.md @@ -16,7 +16,7 @@ description: An appendix of hosted documentation for nearly every release of Boo <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version }}/"> {{ $version }} {{ if (eq $version $.Site.Params.docs_version) -}} - <span class="badge bg-primary">Latest</span> + <span class="badge text-bg-primary">Latest</span> {{- end }} </a> {{ if (eq (add $i 1) $len) }}</div>{{ end }} |
