diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 3b03b17c49ca..0805aee9e839 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -20,10 +20,13 @@ const btnHtml = [ '
', - '
', - ' ', + '
', + ' html', + '
', + ' ', + '
', '
', '
' ].join('') @@ -35,6 +38,7 @@ if (!element.closest('.bd-example-snippet')) { element.insertAdjacentHTML('beforebegin', btnHtml) element.previousElementSibling.append(element) + element.previousElementSibling.querySelector('small').textContent = element.querySelector('pre > code').getAttribute('data-lang') } }) diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 66c7a005ce21..fc5b328df68b 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -52,11 +52,13 @@ // Instantiate all toasts in docs pages only document.querySelectorAll('.bd-example .toast') .forEach(toastNode => { - const toast = new bootstrap.Toast(toastNode, { - autohide: false - }) + if (toastNode.id !== 'liveToast') { + const toast = new bootstrap.Toast(toastNode, { + autohide: false + }) - toast.show() + toast.show() + } }) // Instantiate all toasts in docs pages only @@ -119,6 +121,27 @@ } }) + // ------------------------------- + // Forms + // ------------------------------- + // Modal 'Varying modal content' example in docs and StackBlitz + // js-docs-start forms-validation + // Fetch all the forms we want to apply custom Bootstrap validation styles to + const forms = document.querySelectorAll('.needs-validation') + + // Loop over them and prevent submission + Array.from(forms).forEach(form => { + form.addEventListener('submit', event => { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) + // js-docs-end forms-validation + // ------------------------------- // Links // ------------------------------- diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index c3e5629a8e3f..abc5780f7bdd 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -24,10 +24,6 @@ + .bd-callout { margin-top: -.25rem; } - - .highlight { - background-color: rgba($black, .05); - } } // Variations diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index de709d09ba7f..3ade1db6e581 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -23,7 +23,7 @@ padding: .5em; line-height: 1; color: var(--bs-body-color); - background-color: var(--bd-pre-bg); + background-color: transparent; border: 0; @include border-radius(.25rem); diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 1d8caed666cc..30d198e46db8 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -12,6 +12,19 @@ margin-left: 0; border-width: 1px; @include border-radius(var(--bs-border-radius)); + + > :first-child { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } + + > :last-child { + @include border-bottom-radius(calc(var(--bs-border-radius) - 1px)); + } + + // stylelint-disable-next-line selector-max-universal + > * + * { + border-top: 1px solid var(--bs-border-color); + } } } @@ -31,7 +44,10 @@ margin-right: 0; margin-left: 0; border-width: 1px; - @include border-radius(var(--bs-border-radius)); + + &:not(:first-child) { + @include border-radius(var(--bs-border-radius)); + } } + p { @@ -353,7 +369,6 @@ @include media-breakpoint-up(md) { padding: .75rem 1.25rem; - @include border-radius(calc(var(--bs-border-radius) - 1px)); } @include media-breakpoint-up(lg) { @@ -381,10 +396,6 @@ .highlight-toolbar { background-color: var(--bd-pre-bg); - - + .highlight { - @include border-top-radius(0); - } } .bd-file-ref { diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index d74d1ec24941..32df8a49f81a 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -21,10 +21,27 @@ } .bd-code-snippet { + --bs-border-radius: .5rem; + + position: relative; margin: 0; - border-color: var(--bs-border-color-translucent); border-width: 1px; - @include border-radius(.5rem); + } + + .highlight-toolbar { + padding: 0 !important; // stylelint-disable-line declaration-no-important + + > :first-child { + display: none; + } + + > :last-child { + position: absolute; + top: 50%; + right: .75rem; + z-index: 1; + transform: translateY(-50%); + } } .highlight { @@ -34,7 +51,8 @@ text-overflow: ellipsis; white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); - @include border-radius(calc(.5rem - 1px)); + border: 0; + @include border-radius(subtract(var(--bs-border-radius), 1px)); @include media-breakpoint-up(lg) { padding-right: 4rem; @@ -46,12 +64,6 @@ overflow: hidden; } } - .btn-clipboard { - position: absolute; - top: -.625rem; - right: 0; - background-color: transparent; - } #carbonads { // stylelint-disable-line selector-max-id margin-inline: auto; diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 83a61382a310..967bd0f84e40 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -243,9 +243,9 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables. -
+{{< example show_markup=false >}} -
+{{< /example >}} {{< scss-docs name="btn-css-vars-example" file="site/assets/scss/_buttons.scss" >}} diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 6e3811f1f132..32a5176662b1 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -59,84 +59,79 @@ While ` - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
+{{< example skip=ul >}} + +
+ + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + + +
    + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + + +
    + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + + +
    + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + + +
    + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    -```html
    - - +
    -``` +{{< /example >}} ### Split button @@ -144,208 +139,159 @@ Similarly, create split button dropdowns with virtually the same markup as singl We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button. -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    +{{< example skip=ul >}} + +
    + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    -```html - + +
    + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + +
    - + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + + +
    + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + + +
    + + + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     +
    + + +
    + - +
    -``` +{{< /example >}} ## Sizing Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. -
    -
    - - -
    -
    - - - -
    -
    - -```html +{{< example skip="ul" >}}
    - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    - + - -
    -``` - -
    -
    - - -
    -
    - - - -
    + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    +{{< /example >}} -```html +{{< example skip="ul" >}} +
    - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    - + - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    -``` +{{< /example >}} ## Dark dropdowns @@ -424,45 +370,19 @@ Make the dropdown menu centered below the toggle with `.dropdown-center` on the Trigger dropdown menus above elements by adding `.dropup` to the parent element. -
    -
    - - -
    -
    - - - -
    -
    - -```html +{{< example skip=ul >}}
    - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    @@ -473,11 +393,15 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    -``` +{{< /example >}} ### Dropup centered @@ -500,45 +424,19 @@ Make the dropup menu centered above the toggle with `.dropup-center` on the pare Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element. -
    -
    - - -
    -
    - - - -
    -
    - -```html +{{< example skip=ul >}}
    - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    @@ -549,55 +447,33 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     -``` +{{< /example >}} ### Dropstart Trigger dropdown menus at the left of the elements by adding `.dropstart` to the parent element. -
    -
    - - -
    -
    - - - -
    -
    - -```html +{{< example skip=ul >}}
    - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +
    @@ -605,14 +481,18 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the - + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • +     -``` +{{< /example >}} ## Menu items diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 598bb38d6026..10418e036c7c 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -335,55 +335,34 @@ Loop that generates the modifier classes with an overriding of CSS variables. Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our list group to create tabbable panes of local content. -
    -
    -
    - -
    -
    -
    -
    -

    Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    -
    -
    -

    Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    -
    -
    -

    Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    -
    -
    -

    Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    -
    -
    -
    -
    -
    - -```html +{{< example >}}
    -
    ...
    -
    ...
    -
    ...
    -
    ...
    + +

    Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    +     + +

    Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    +     + +

    Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    +     + +

    Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

    +
    -``` +{{< /example >}} ### Using data attributes diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index ba2a51a6e320..25c59c235666 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -38,28 +38,8 @@ Keep reading for demos and usage guidelines. Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. -
    -
    -
    -
    -
    -
    Modal title
    - -
    -
    -

    Modal body text goes here.

    -
    -
    - - -
    -
    -
    -
    -
    - -```html -
    +{{< example class="bg-body-tertiary" >}} +
    @@ -76,7 +56,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
    -``` +{{< /example >}} {{< callout info >}} In the above static example, we use `
    `, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `

    `. If necessary, you can use the [font size utilities]({{< docsref "/utilities/text#font-size" >}}) to control the heading's appearance. All the following live examples use this approach. @@ -86,47 +66,23 @@ In the above static example, we use `

    `, to avoid issues with the heading hie Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. - - -
    - -
    - -```html +{{< example >}} - - -``` +{{< /example >}} ### List group Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change. -
    -
    -
    - -
    -
    -
    -

    Item 1

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Item 2

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Item 3

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Item 4

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -
    -
    -
    -
    - -```html +{{< example skip=p >}}
    @@ -256,51 +141,23 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group

    Item 1

    -

    ...

    + This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Item 2

    -

    ...

    + This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Item 3

    -

    ...

    + This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Item 4

    -

    ...

    + This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
    -``` +{{< /example >}} ### Simple anchors Scrollspy is not limited to nav components and list groups, so it will work on any `` anchor elements in the current document. Scroll the area and watch the `.active` class change. -
    -
    -
    -
    - Item 1 - Item 2 - Item 3 - Item 4 - Item 5 -
    -
    -
    -
    -

    Item 1

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Item 2

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Item 3

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Item 4

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Item 5

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -
    -
    -
    -
    - -```html +{{< example skip=p >}}
    @@ -314,19 +171,19 @@ Scrollspy is not limited to nav components and list groups, so it will work on a

    Item 1

    -

    ...

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Item 2

    -

    ...

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Item 3

    -

    ...

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Item 4

    -

    ...

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Item 5

    -

    ...

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -``` +{{< /example >}} ## Non-visible elements diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md index a7d1cb7130e2..e837112243d6 100644 --- a/site/content/docs/5.3/components/toasts.md +++ b/site/content/docs/5.3/components/toasts.md @@ -49,31 +49,13 @@ Previously, our scripts dynamically added the `.hide` class to completely hide a Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default. -
    - -
    - -
    - -
    - -```html +{{< example stackblitz_add_js=true >}}
    -``` +{{}} We use the following JavaScript to trigger our live toast demo: diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index 91adacc7f121..88ac8cf795d0 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -75,49 +75,26 @@ You can customize the appearance of tooltips using [CSS variables](#variables). Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. -
    -
    - - - - - -
    -
    - -```html - - - - -``` - -And with custom HTML added: - -```html - -``` +{{< example class=tooltip-demo stackblitz_add_js=true >}} + + + + + + + +{{< /example >}} With an SVG: -
    - - - - - - -
    +{{< example class=tooltip-demo stackblitz_add_js=true >}} + + + + + + +{{< /example >}} ## CSS diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md index ef2bd13bcfbd..892a0507895d 100644 --- a/site/content/docs/5.3/content/reboot.md +++ b/site/content/docs/5.3/content/reboot.md @@ -143,7 +143,7 @@ The `
    ` element has been simplified. Similar to browser defaults, `
    `s are All lists—`
      `, `
        `, and `
        `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `
          ` and `
            ` elements. -
            +{{< example show_markup=false >}} {{< markdown >}} * All lists have their top margin removed * And their bottom margin normalized @@ -157,21 +157,21 @@ All lists—`
              `, `
                `, and `
                `—have their `margin-top` removed and a ` 3. It has the same overall look 4. As the previous unordered list {{< /markdown >}} -
            +{{< /example >}} For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `
            `s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
            `s are **bolded**. -
            -
            -
            Description lists
            -
            A description list is perfect for defining terms.
            -
            Term
            -
            Definition for the term.
            -
            A second definition for the same term.
            -
            Another term
            -
            Definition for this other term.
            -
            -
            +{{< example show_markup=false >}} +
            +
            Description lists
            +
            A description list is perfect for defining terms.
            +
            Term
            +
            Definition for the term.
            +
            A second definition for the same term.
            +
            Another term
            +
            Definition for this other term.
            +
            +{{< /example >}} ## Inline code @@ -273,7 +273,8 @@ These changes, and more, are demonstrated below. {{< partial "callouts/warning-input-support.md" >}} {{< /callout >}} -
            +{{< example show_markup=false >}} +
            Example legend

            @@ -394,6 +395,7 @@ These changes, and more, are demonstrated below.

            +{{< /example >}} ### Pointers on buttons @@ -409,54 +411,54 @@ Reboot includes an enhancement for `role="button"` to change the default cursor The `
            ` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `
            `s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
            `. -
            -
            - ACME Corporation
            - 1123 Fictional St,
            - San Francisco, CA 94103
            - P: (123) 456-7890 -
            - -
            - Full Name
            - first.last@example.com -
            -
            +{{< example show_markup=false >}} +
            + ACME Corporation
            + 1123 Fictional St,
            + San Francisco, CA 94103
            + P: (123) 456-7890 +
            + +
            + Full Name
            + first.last@example.com +
            +{{< /example >}} ### Blockquote The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. -
            -
            -

            A well-known quote, contained in a blockquote element.

            -
            -

            Someone famous in Source Title

            -
            +{{< example show_markup=false >}} +
            +

            A well-known quote, contained in a blockquote element.

            +
            +

            Someone famous in Source Title

            +{{< /example >}} ### Inline elements The `` element receives basic styling to make it stand out amongst paragraph text. -
            - The HTML abbreviation element. -
            +{{< example show_markup=false >}} +The HTML abbreviation element. +{{< /example >}} ### Summary The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it. -
            -
            - Some details -

            More info about the details.

            -
            +{{< example show_markup=false >}} +
            + Some details +

            More info about the details.

            +
            -
            - Even more details -

            Here are even more details about the details.

            -
            -
            +
            + Even more details +

            Here are even more details about the details.

            +
            +{{< /example >}} ## HTML5 `[hidden]` attribute diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index b75b233e1267..10caa92400e0 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -22,33 +22,33 @@ Use contextual classes to color tables, table rows or individual cells. **Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6. {{< /callout >}} -
            - - - - - - - - - - - - - - - {{< table.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - - - - - - {{- end -}} - {{< /table.inline >}} - -
            ClassHeadingHeading
            DefaultCellCell
            {{ .name | title }}CellCell
            -
            +{{< example show_markup=false >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
            ClassHeadingHeading
            DefaultCellCell
            {{ .name | title }}CellCell
            +{{< /example >}} {{< highlight html >}} {{< table.inline >}} @@ -116,50 +116,29 @@ These hoverable rows can also be combined with the striped rows variant: Highlight a table row or cell by adding a `.table-active` class. -
            - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
            #FirstLastHandle
            1MarkOtto@mdo
            2JacobThornton@fat
            3Larry the Bird@twitter
            -
            - -```html +{{< example skip=tr >}} - ... + + + + + + - - ... - - - ... - + + + + + + + + + + + + @@ -167,52 +146,31 @@ Highlight a table row or cell by adding a `.table-active` class.
            #FirstLastHandle
            1MarkOtto@mdo2JacobThornton@fat
            3 Larry the Bird
            -``` - -
            - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
            #FirstLastHandle
            1MarkOtto@mdo
            2JacobThornton@fat
            3Larry the Bird@twitter
            -
            +{{< /example >}} -```html +{{< example skip=tr >}} - ... + + + + + + - - ... - - - ... - + + + + + + + + + + + + @@ -220,7 +178,7 @@ Highlight a table row or cell by adding a `.table-active` class.
            #FirstLastHandle
            1MarkOtto@mdo2JacobThornton@fat
            3 Larry the Bird
            -``` +{{< /example >}} ## How do the variants and accented tables work? @@ -268,34 +226,34 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` Add a thicker border, darker between table groups—``, ``, and ``—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time). -{{< example >}} +{{< example skip=tr >}} - + - + - + - - + + - - + + - +
            # First Last Handle
            1 Mark Otto @mdo
            2 Jacob Thornton @fat
            3 Larry the Bird @twitter
            {{< /example >}} @@ -304,146 +262,101 @@ Add a thicker border, darker between table groups—``, ``, and `< Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. -
            -
            -
            - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
            Heading 1Heading 2Heading 3Heading 4
            This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
            This cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
            This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell is aligned to the top.This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
            -
    -
    - -```html +{{< example skip=tr >}}
    - - ... - + + + + + + + + + + + + + + + + + + - ... - - - ... - - - - + + - +
    Heading 1Heading 2Heading 3Heading 4
    This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.This cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
    ......This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the table This cell is aligned to the top....This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
    -``` +{{< /example >}} ## Nesting Border styles, active styles, and table variants are not inherited by nested tables. -
    +{{< example skip=tr >}} - + - + - + - + - + - +
    # First Last Handle
    1 Mark Otto @mdo
    - + - + - + - - + + - - + + - +
    Header Header Header
    A First Last
    B First Last
    C First Last
    3 Larry the Bird @twitter
    -
    - -```html - - - ... - - - ... - - - - ... - -
    - - ... -
    -
    -``` +{{< /example >}} ## How nesting works @@ -457,206 +370,185 @@ Note that if you add ``s as direct children of a table, those `` will be Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make ``s appear light or dark gray. -
    +{{< example skip=tr >}} - + - + - + - - + + - - + + - - -
    # First Last Handle
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter
    -
    - -```html - - - ... - - - ... +
    -``` +{{< /example >}} -
    +{{< example skip=tr >}} - + - + - + - - + + - - + + - - -
    # First Last Handle
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter
    -
    - -```html - - - ... - - - ... +
    -``` +{{< /example >}} ### Table foot -
    +{{< example skip=tr >}} - + - + - + - - + + - - + + - + - + - +
    # First Last Handle
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter
    Footer Footer Footer Footer
    -
    - -```html - - - ... - - - ... - - - ... - -
    -``` +{{< /example >}} ### Captions A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. -
    - - - {{< partial "table-content" >}} -
    List of users
    -
    - -```html - +{{< example skip=tr >}} +
    - ... + + + + + + - ... + + + + + + + + + + + + + + + + + +
    List of users
    #FirstLastHandle
    1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
    -``` +{{< /example >}} You can also put the `` on the top of the table with `.caption-top`. -{{< example >}} +{{< example skip=tr >}} - + - + - + - - + + - - + + - +
    List of users
    # First Last Handle
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter
    {{< /example >}} @@ -675,72 +567,64 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
    1CellCellCellCellCellCellCellCellCell
    2CellCellCellCellCellCellCellCellCell
    3CellCellCellCellCellCellCellCellCell
    -
    -
    - -```html +{{< example skip=table >}}
    - - ... -
    + + + + # + Heading + Heading + Heading + Heading + Heading + Heading + Heading + Heading + Heading + + + + + 1 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 2 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 3 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + +
    -``` +{{< /example >}} ### Breakpoint specific @@ -748,80 +632,66 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab **These tables may appear broken until their responsive styles apply at specific viewport widths.** -{{< tables.inline >}} +{{< example skip=table >}} +{{< table.inline >}} {{ range $.Site.Data.breakpoints }} -{{ if not (eq . "xs") }} -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
    1CellCellCellCellCellCellCellCell
    2CellCellCellCellCellCellCellCell
    3CellCellCellCellCellCellCellCell
    -
    -
    -{{ end -}} -{{- end -}} -{{< /tables.inline >}} - -{{< highlight html >}} -{{< tables.inline >}} -{{- range $.Site.Data.breakpoints -}} -{{- if not (eq . "xs") }} -
    - - ... -
    +{{ if not (eq .breakpoint "xs") }} +
    + + + + # + Heading + Heading + Heading + Heading + Heading + Heading + Heading + Heading + + + + + 1 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 2 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 3 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + +
    {{ end -}} {{- end -}} -{{< /tables.inline >}} -{{< /highlight >}} +{{< /table.inline >}} +{{< /example >}} ## CSS diff --git a/site/content/docs/5.3/content/typography.md b/site/content/docs/5.3/content/typography.md index ca0f4e985ee9..e30b66652e44 100644 --- a/site/content/docs/5.3/content/typography.md +++ b/site/content/docs/5.3/content/typography.md @@ -22,25 +22,14 @@ These styles can be found within `_reboot.scss`, and the global variables are de All HTML headings, `

    ` through `

    `, are available. -{{< bs-table >}} -| Heading | Example | -| --- | --- | -| `

    ` | h1. Bootstrap heading | -| `

    ` | h2. Bootstrap heading | -| `

    ` | h3. Bootstrap heading | -| `

    ` | h4. Bootstrap heading | -| `
    ` | h5. Bootstrap heading | -| `
    ` | h6. Bootstrap heading | -{{< /bs-table >}} - -```html +{{< example >}}

    h1. Bootstrap heading

    h2. Bootstrap heading

    h3. Bootstrap heading

    h4. Bootstrap heading

    h5. Bootstrap heading
    h6. Bootstrap heading
    -``` +{{< /example >}} `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. @@ -68,23 +57,14 @@ Use the included utility classes to recreate the small secondary heading text fr Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. -
    -
    Display 1
    -
    Display 2
    -
    Display 3
    -
    Display 4
    -
    Display 5
    -
    Display 6
    -
    - -```html -

    Display 1

    -

    Display 2

    -

    Display 3

    -

    Display 4

    -

    Display 5

    +{{< example skip="h1" >}} +

    Display 1

    +

    Display 2

    +

    Display 3

    +

    Display 4

    +

    Display 5

    Display 6

    -``` +{{< /example >}} Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`. diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 945d5ec336c0..f6109212cd2d 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -150,7 +150,8 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu {{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}} -
    +{{< example class="p-0" >}} +
    Example blue theme

    Some paragraph text to show how the blue theme might look with written copy.

    @@ -169,13 +170,8 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu
  • Separated link
    • -
    - -```html -
    - ... -
    -``` + +{{< /example >}} ## JavaScript diff --git a/site/content/docs/5.3/customize/components.md b/site/content/docs/5.3/customize/components.md index 262c8d8c6974..83c0e6a7c1d0 100644 --- a/site/content/docs/5.3/customize/components.md +++ b/site/content/docs/5.3/customize/components.md @@ -40,15 +40,11 @@ For more information and examples on how to modify our Sass maps and variables, We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We've extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes. -
    -
    +{{< example >}} + This is a callout. We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes. -
    -
    - -```html -
    ...
    -``` + +{{< /example >}} In your CSS, you'd have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class. diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md index d0fc42f3db86..f401405c50d6 100644 --- a/site/content/docs/5.3/docsref.md +++ b/site/content/docs/5.3/docsref.md @@ -30,20 +30,52 @@ sitemap_exclude: true ## Code example +
    +
    This is a test.
    +
    + ```scss .test { --color: blue; } ``` -
    - The HTML abbreviation element. -
    +```html +
    This is a markup only test.
    +``` + +{{< highlight html >}} +
    This is a markup only test.
    +{{< /highlight >}} + +{{< example show_preview=false >}} +
    This is a markup only test.
    +{{< /example >}} + +{{< example show_markup=false >}} +
    This is a preview only test.
    +{{< /example >}} {{< example >}}
    This is a test.
    {{< /example >}} +{{< example class=bg-body-secondary >}} +
    This is a test.
    +{{< /example >}} + +{{< example >}} + + This is a skip test. + +{{< /example >}} + +{{< example skip=p >}} + + This is a skip test with p. + +{{< /example >}} + {{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}} {{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}} 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 9fd24e2e0b96..f17ad1cb4137 100644 --- a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html @@ -1433,40 +1433,38 @@

    المخطوطة

    -
    - -
    -

    @fat

    -

    محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.

    -

    @mdo

    -

    بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

    -

    واحد

    -

    وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

    -

    اثنان

    -

    مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

    -

    ثلاثة

    -

    وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

    -

    ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

    -
    + +
    +

    @fat

    +

    محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.

    +

    @mdo

    +

    بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

    +

    واحد

    +

    وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

    +

    اثنان

    +

    مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

    +

    ثلاثة

    +

    وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

    +

    ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

    diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html index 4c96bc0ae6e4..5ea47dcc1c7c 100644 --- a/site/content/docs/5.3/examples/cheatsheet/index.html +++ b/site/content/docs/5.3/examples/cheatsheet/index.html @@ -1430,39 +1430,37 @@

    Scrollspy

    -
    - +
    -

    First heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Second heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Third heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Fourth heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -

    Fifth heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -
    +

    First heading

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    Second heading

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    Third heading

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    Fourth heading

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    Fifth heading

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md index c66bbaf87c82..907310d0d0a7 100644 --- a/site/content/docs/5.3/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -4,9 +4,6 @@ title: Validation description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript. group: forms toc: true -extra_js: - - src: "/docs/5.3/assets/js/validate-forms.js" - async: true --- {{< callout warning >}} @@ -34,7 +31,7 @@ For custom Bootstrap form validation messages, you'll need to add the `novalidat Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for `