From: Mark Otto Date: Wed, 11 Mar 2026 20:18:51 +0000 (-0700) Subject: Update button selectors and class usage (#42149) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=27483ddf53239a9ef4ee56acb4cd89df789425aa;p=thirdparty%2Fbootstrap.git Update button selectors and class usage (#42149) * Fix a ton of btn classes * Update buttons class list, no need for .btn on any variants now, update classes across docs and examples * fix --- diff --git a/config.yml b/config.yml index ac7ba6e14b..2715816227 100644 --- a/config.yml +++ b/config.yml @@ -50,4 +50,4 @@ anchors: toc: min: 2 - max: 6 + max: 3 diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 4c71bad916..3e3035d3c8 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -15,7 +15,7 @@

Hello, world!

- diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index 2433b9e8e3..c5b09b170c 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -21,8 +21,8 @@ Oh snap! Change a few things up and try submitting again.

- - + +

@@ -32,8 +32,8 @@ Oh snap! Change a few things up and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

- - + +

diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index 47c50889ca..054dcf034a 100644 --- a/js/tests/visual/button.html +++ b/js/tests/visual/button.html @@ -10,7 +10,7 @@

Button Bootstrap Visual Test

- @@ -18,13 +18,13 @@

Navigate to the checkboxes with the keyboard (generally, using Tab / Shift + Tab), and ensure that Space toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that Space toggles the checkbox again.

-
@@ -32,13 +32,13 @@

Navigate to the radio button group with the keyboard (generally, using Tab / Shift + Tab). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with Tab or "backwards" using Shift + Tab). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the ← and → arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that ← and → change the selected radio button again.

-
diff --git a/js/tests/visual/datepicker.html b/js/tests/visual/datepicker.html index 472f953f55..e50a9afd58 100644 --- a/js/tests/visual/datepicker.html +++ b/js/tests/visual/datepicker.html @@ -90,9 +90,9 @@
- - - + + +
diff --git a/js/tests/visual/dialog.html b/js/tests/visual/dialog.html index 68ed33612f..ad31fc8c05 100644 --- a/js/tests/visual/dialog.html +++ b/js/tests/visual/dialog.html @@ -26,7 +26,7 @@

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Popover in a dialog

-

This should trigger a popover on click.

+

This should trigger a popover on click.

Tooltips in a dialog

This link and that link should have tooltips on hover.

@@ -39,8 +39,8 @@

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

- - + +
@@ -54,7 +54,7 @@

Press Escape or click the close button to dismiss.

- +
@@ -68,7 +68,7 @@

You must use the close button.

- +
@@ -82,8 +82,8 @@

Notice how the backdrop stays visible during the swap.

- - + +
@@ -97,8 +97,8 @@

You can swap back to the first dialog or close this one.

- - + +
@@ -118,50 +118,50 @@

Try clicking the buttons on the page behind this dialog!

- +
-
-
-
-
- (uses show() instead of showModal())
-
-
diff --git a/js/tests/visual/dropdown-submenu.html b/js/tests/visual/dropdown-submenu.html index 351aa3478c..5212ba1e11 100644 --- a/js/tests/visual/dropdown-submenu.html +++ b/js/tests/visual/dropdown-submenu.html @@ -63,7 +63,7 @@
-
    @@ -93,7 +93,7 @@
    -
      @@ -130,7 +130,7 @@
      -
        @@ -179,7 +179,7 @@
        -
          @@ -197,7 +197,7 @@
        -
          @@ -278,7 +278,7 @@
          -
            @@ -305,7 +305,7 @@
            -
              @@ -356,7 +356,7 @@
              -
                @@ -392,7 +392,7 @@
                -
                  diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 8e55e44622..971aad604e 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -62,14 +62,14 @@
                  - +
                  - - +
                    @@ -82,7 +82,7 @@
                    - +
                    -
                    @@ -104,8 +104,8 @@
                    - Dropup split align end -
                    @@ -115,7 +115,7 @@
                    - +
                    @@ -126,8 +126,8 @@
                    - Dropend split -
                    @@ -137,7 +137,7 @@
                    -
                    @@ -148,8 +148,8 @@
                    - Dropstart split -
                    @@ -159,7 +159,7 @@
                    -
                    @@ -174,8 +174,8 @@
                    - - +
                      @@ -187,7 +187,7 @@
                    -
                      diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html index 73edf998d4..36a20cac47 100644 --- a/js/tests/visual/popover.html +++ b/js/tests/visual/popover.html @@ -10,23 +10,23 @@

                      Popover Bootstrap Visual Test

                      - - - - -
                      diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index e64fd1d880..a36b2e619d 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -19,8 +19,8 @@
                      - - + +
                    diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index d03d3b3bbd..532380a2ac 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -26,35 +26,35 @@

                    - - - - -

                    - - - -

                    @@ -72,13 +72,13 @@
                    Test Selector triggered tooltips
                    - - + +
                    - +
                    @@ -90,10 +90,10 @@ if (typeof document.body.attachShadow === 'function') { const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) shadowRoot.innerHTML = - '' + - '' diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss index 58ffe2e2f3..3826471bb5 100644 --- a/scss/buttons/_button.scss +++ b/scss/buttons/_button.scss @@ -165,13 +165,14 @@ $button-variants: defaults( // Base styles // -$btn-variant-selectors: () !default; +// scss-docs-start btn-variant-selectors +$btn-variant-selectors: (string.unquote(".btn"), string.unquote(".btn-link"), string.unquote(".btn-icon")) !default; @each $variant, $config in $button-variants { $btn-variant-selectors: list.append($btn-variant-selectors, string.unquote(".btn-#{$variant}"), comma); } +// scss-docs-end btn-variant-selectors @layer components { - .btn, #{$btn-variant-selectors} { @include tokens($button-tokens); diff --git a/site/src/assets/examples/album/index.astro b/site/src/assets/examples/album/index.astro index 6fe3d5fe68..b4dd5de459 100644 --- a/site/src/assets/examples/album/index.astro +++ b/site/src/assets/examples/album/index.astro @@ -45,8 +45,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    Album example

                    Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

                    - Main call to action - Secondary action + Main call to action + Secondary action

                    @@ -63,8 +63,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -78,8 +78,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -93,8 +93,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -109,8 +109,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -124,8 +124,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -139,8 +139,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -155,8 +155,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -170,8 +170,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    @@ -185,8 +185,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                    - - + +
                    9 mins
                    diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro index 0ed4da0109..61fba9aa03 100644 --- a/site/src/assets/examples/blog/index.astro +++ b/site/src/assets/examples/blog/index.astro @@ -30,7 +30,7 @@ import Placeholder from "@shortcodes/Placeholder.astro" Search - Sign up + Sign up
                    @@ -221,8 +221,8 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                    diff --git a/site/src/assets/examples/buttons/index.astro b/site/src/assets/examples/buttons/index.astro index a1dbfc6d74..e4ccd9c5f6 100644 --- a/site/src/assets/examples/buttons/index.astro +++ b/site/src/assets/examples/buttons/index.astro @@ -13,34 +13,35 @@ export const title = 'Buttons'
                    - - - - - - - - - + + + + + + + + + +
                    - - + +
                    - - @@ -49,11 +50,11 @@ export const title = 'Buttons'
                    - - @@ -62,22 +63,22 @@ export const title = 'Buttons'
                    - -
                    - - diff --git a/site/src/assets/examples/carousel/index.astro b/site/src/assets/examples/carousel/index.astro index 8660d7458d..14db98c481 100644 --- a/site/src/assets/examples/carousel/index.astro +++ b/site/src/assets/examples/carousel/index.astro @@ -25,7 +25,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                  @@ -47,7 +47,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                  Example headline.

                  Some representative placeholder content for the first slide of the carousel.

                  -

                  Sign up today

                  +

                  Sign up today

                @@ -57,7 +57,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

                Another example headline.

                Some representative placeholder content for the second slide of the carousel.

                -

                Learn more

                +

                Learn more

              @@ -67,7 +67,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"

              One more for good measure.

              Some representative placeholder content for the third slide of this carousel.

              -

              Browse gallery

              +

              Browse gallery

            @@ -95,19 +95,19 @@ import Placeholder from "@shortcodes/Placeholder.astro"

            Heading

            Some representative placeholder content for the three columns of text below the carousel. This is the first column.

            -

            View details »

            +

            View details »

            Heading

            Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

            -

            View details »

            +

            View details »

            Heading

            And lastly this, the third column of representative placeholder content.

            -

            View details »

            +

            View details »

          diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro index 60c91be15a..e38895fd10 100644 --- a/site/src/assets/examples/cheatsheet/index.astro +++ b/site/src/assets/examples/cheatsheet/index.astro @@ -360,7 +360,7 @@ export const body_class = 'bg-body-tertiary'
          - + `} />
        @@ -415,7 +415,7 @@ export const body_class = 'bg-body-tertiary'
        - + `} />
      @@ -584,7 +584,7 @@ export const body_class = 'bg-body-tertiary'
    - +
    `} /> @@ -717,18 +717,18 @@ export const body_class = 'bg-body-tertiary'
    ` - + `), - ``]} /> + ``]} /> ` - + `)} /> Small button - - + + + `} />
    @@ -742,18 +742,18 @@ export const body_class = 'bg-body-tertiary'
    - - - - + + + +
    - - - + + +
    - +
    `} /> @@ -774,7 +774,7 @@ export const body_class = 'bg-body-tertiary'
    Card title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    - Go somewhere + Go somewhere
@@ -786,7 +786,7 @@ export const body_class = 'bg-body-tertiary'
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

- Go somewhere + Go somewhere
2 days ago @@ -887,10 +887,10 @@ export const body_class = 'bg-body-tertiary'
+ - `} /> @@ -905,7 +905,7 @@ export const body_class = 'bg-body-tertiary'
-
    @@ -918,7 +918,7 @@ export const body_class = 'bg-body-tertiary'
-
    @@ -931,7 +931,7 @@ export const body_class = 'bg-body-tertiary'
-
    @@ -948,8 +948,8 @@ export const body_class = 'bg-body-tertiary' - - +
      @@ -959,8 +959,8 @@ export const body_class = 'bg-body-tertiary'
- - +
    @@ -970,8 +970,8 @@ export const body_class = 'bg-body-tertiary'
- - +
    @@ -981,8 +981,8 @@ export const body_class = 'bg-body-tertiary'
- - +
    @@ -992,8 +992,8 @@ export const body_class = 'bg-body-tertiary'
- - +
    @@ -1003,8 +1003,8 @@ export const body_class = 'bg-body-tertiary'
- - +
    @@ -1018,7 +1018,7 @@ export const body_class = 'bg-body-tertiary'
    -
      @@ -1031,7 +1031,7 @@ export const body_class = 'bg-body-tertiary'
    -
      @@ -1044,7 +1044,7 @@ export const body_class = 'bg-body-tertiary'
    -
      @@ -1062,7 +1062,7 @@ export const body_class = 'bg-body-tertiary'
      -
        @@ -1209,7 +1209,7 @@ export const body_class = 'bg-body-tertiary'
    @@ -1248,7 +1248,7 @@ export const body_class = 'bg-body-tertiary'
@@ -1322,20 +1322,20 @@ export const body_class = 'bg-body-tertiary'
Click to toggle popover + `} /> + - - - `} /> @@ -1471,11 +1471,11 @@ export const body_class = 'bg-body-tertiary'
Tooltip on top - - - - + + + + + `} />
@@ -1491,8 +1491,8 @@ export const body_class = 'bg-body-tertiary'

This is a native dialog element using Bootstrap's Dialog component.

- - + +
@@ -1505,7 +1505,7 @@ export const body_class = 'bg-body-tertiary'

I will not close if you click outside of me. Use the close button or press Escape.

- - + +
diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro index 029bc796bf..c4185bc1f2 100644 --- a/site/src/assets/examples/checkout/index.astro +++ b/site/src/assets/examples/checkout/index.astro @@ -59,7 +59,7 @@ export const body_class = 'bg-body-tertiary'
- +
@@ -214,7 +214,7 @@ export const body_class = 'bg-body-tertiary'
- + diff --git a/site/src/assets/examples/cover/index.astro b/site/src/assets/examples/cover/index.astro index 3af7315016..1b84aa9608 100644 --- a/site/src/assets/examples/cover/index.astro +++ b/site/src/assets/examples/cover/index.astro @@ -21,7 +21,7 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'

Cover your page.

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

- Learn more + Learn more

diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro index d0f531659a..331e02decf 100644 --- a/site/src/assets/examples/dashboard/index.astro +++ b/site/src/assets/examples/dashboard/index.astro @@ -184,10 +184,10 @@ export const extra_js = [

Dashboard

- - + +
- diff --git a/site/src/assets/examples/dialogs/index.astro b/site/src/assets/examples/dialogs/index.astro index 245dfe57d0..5663101f8f 100644 --- a/site/src/assets/examples/dialogs/index.astro +++ b/site/src/assets/examples/dialogs/index.astro @@ -36,8 +36,8 @@ export const extra_css = ['dialogs.css']

This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.

- - + +
@@ -92,7 +92,7 @@ export const extra_css = ['dialogs.css']
- +
@@ -116,19 +116,19 @@ export const extra_css = ['dialogs.css'] - + By clicking Sign up, you agree to the terms of use.
Or use a third-party
- - - diff --git a/site/src/assets/examples/features/index.astro b/site/src/assets/examples/features/index.astro index 5eecc49b45..9b81e02bc5 100644 --- a/site/src/assets/examples/features/index.astro +++ b/site/src/assets/examples/features/index.astro @@ -109,7 +109,7 @@ export const extra_css = ['features.css']

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

- + Primary button
@@ -121,7 +121,7 @@ export const extra_css = ['features.css']

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

- + Primary button
@@ -133,7 +133,7 @@ export const extra_css = ['features.css']

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

- + Primary button
@@ -286,7 +286,7 @@ export const extra_css = ['features.css']

Left-aligned title explaining these awesome features

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

- Primary button + Primary button
diff --git a/site/src/assets/examples/footers/index.astro b/site/src/assets/examples/footers/index.astro index aed5b1773a..9e4e0ddbe9 100644 --- a/site/src/assets/examples/footers/index.astro +++ b/site/src/assets/examples/footers/index.astro @@ -162,7 +162,7 @@ export const title = 'Footers'
- +
diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro index a34f2b0262..fc35fe9af0 100644 --- a/site/src/assets/examples/headers/index.astro +++ b/site/src/assets/examples/headers/index.astro @@ -80,15 +80,15 @@ export const extra_css = ['headers.css']
- - + +
-
+
@@ -104,12 +104,12 @@ export const extra_css = ['headers.css']
- - + +
@@ -283,8 +283,8 @@ export const extra_css = ['headers.css']
- - + +
diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro index 8ac2a70ac3..e0c6b75234 100644 --- a/site/src/assets/examples/heroes/index.astro +++ b/site/src/assets/examples/heroes/index.astro @@ -14,8 +14,8 @@ export const extra_css = ['heroes.css']

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

- - + +
@@ -27,8 +27,8 @@ export const extra_css = ['heroes.css']

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

- - + +
@@ -49,8 +49,8 @@ export const extra_css = ['heroes.css']

Responsive left-aligned hero with image

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

- - + +
@@ -79,7 +79,7 @@ export const extra_css = ['heroes.css'] Remember me - +
By clicking Sign up, you agree to the terms of use. @@ -95,8 +95,8 @@ export const extra_css = ['heroes.css']

Border hero with cropped image and shadows

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

- - + +
@@ -113,8 +113,8 @@ export const extra_css = ['heroes.css']

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

- - + +
diff --git a/site/src/assets/examples/jumbotron/index.astro b/site/src/assets/examples/jumbotron/index.astro index 6874af1ca3..d4bc80cfb3 100644 --- a/site/src/assets/examples/jumbotron/index.astro +++ b/site/src/assets/examples/jumbotron/index.astro @@ -15,7 +15,7 @@ export const title = 'Jumbotron example'

Custom jumbotron

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

- +
@@ -24,14 +24,14 @@ export const title = 'Jumbotron example'

Change the background

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

- +

Add borders

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

- +
diff --git a/site/src/assets/examples/jumbotrons/index.astro b/site/src/assets/examples/jumbotrons/index.astro index 2f7781d49b..9895a27418 100644 --- a/site/src/assets/examples/jumbotrons/index.astro +++ b/site/src/assets/examples/jumbotrons/index.astro @@ -25,11 +25,11 @@ export const extra_css = ['jumbotrons.css'] This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive .col-* class, and a customized call to action.

- -
@@ -46,7 +46,7 @@ export const extra_css = ['jumbotrons.css']

This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.

- diff --git a/site/src/assets/examples/navbar-bottom/index.astro b/site/src/assets/examples/navbar-bottom/index.astro index c3889724f0..a0d41dab7c 100644 --- a/site/src/assets/examples/navbar-bottom/index.astro +++ b/site/src/assets/examples/navbar-bottom/index.astro @@ -8,7 +8,7 @@ export const title = 'Bottom navbar example'

Bottom Navbar example

This example is a quick exercise to illustrate how the bottom navbar works.

- View navbar docs » + View navbar docs »