From: Julien Déramond Date: Wed, 22 Apr 2026 05:12:46 +0000 (+0200) Subject: Docs: use correctly breakpoints as prefixes for utility classes, and docs content... X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b29893b1d3d39967cc2886cc888aa822f931e0c8;p=thirdparty%2Fbootstrap.git Docs: use correctly breakpoints as prefixes for utility classes, and docs content (#42347) --- diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 3e3035d3c8..e4fa9f0a38 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -29,21 +29,21 @@
First slide -
+
First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide -
+
Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide -
+
Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

diff --git a/site/data/breakpoints.yml b/site/data/breakpoints.yml index 03d7b21d27..1ea3dfbd1b 100644 --- a/site/data/breakpoints.yml +++ b/site/data/breakpoints.yml @@ -5,31 +5,31 @@ container: '' - breakpoint: sm - abbr: -sm + abbr: 'sm:' name: Small min-width: 576px container: 540px - breakpoint: md - abbr: -md + abbr: 'md:' name: Medium min-width: 768px container: 720px - breakpoint: lg - abbr: -lg + abbr: 'lg:' name: Large min-width: 1024px container: 960px - breakpoint: xl - abbr: -xl + abbr: 'xl:' name: X-Large min-width: 1280px container: 1200px - breakpoint: 2xl - abbr: -2xl + abbr: '2xl:' name: 2X-Large min-width: 1536px container: 1440px diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx index a3696436e8..cb963aefa9 100644 --- a/site/src/content/docs/components/card.mdx +++ b/site/src/content/docs/components/card.mdx @@ -375,7 +375,7 @@ And with the reverse layout: Customize cards by using our theme color utilities. By default, cards use `bg` for their background and border colors when applying a theme color. Use `.card-subtle` to swap the background and border colors for a more subtle look. - `
+ `
${themeColor.title}

Card title

@@ -383,7 +383,7 @@ Customize cards by using our theme color utilities. By default, cards use `bg` f
`)} customMarkup={getData('theme-colors').map((themeColor) => `
…
`)} /> - `
+ `
${themeColor.title}

Card title

diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx index c4244663ef..32a90c9f93 100644 --- a/site/src/content/docs/components/list-group.mdx +++ b/site/src/content/docs/components/list-group.mdx @@ -114,11 +114,13 @@ These work great with custom content as well. ## Horizontal -Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|2xl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** +Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.{sm|md|lg|xl|2xl}:list-group-horizontal` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. - `
    + `
    • An item
    • A second item
    • A third item
      • diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx index 10db4b92cc..1144373936 100644 --- a/site/src/content/docs/content/tables.mdx +++ b/site/src/content/docs/content/tables.mdx @@ -621,7 +621,7 @@ Both `.table-stacked` and `.table-responsive` use container queries, so the `.ta ## Responsive tables -Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-2xl}`. +Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.{sm|md|lg|xl|2xl}:table-responsive`. The `.table-responsive` wrapper also acts as the container query context for [stacked tables](#stacked-tables). @@ -700,14 +700,14 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl ### Breakpoint specific -Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. +Use `.{sm|md|lg|xl|2xl}:table-responsive` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. **These tables may appear broken until their responsive styles apply at specific viewport widths.** {getData('breakpoints').map((breakpoint) => { return (
      -
      +
      @@ -763,7 +763,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tab ) })} - `
      + `
      ...
      diff --git a/site/src/content/docs/utilities/align-content.mdx b/site/src/content/docs/utilities/align-content.mdx index 32670e99a3..7e2e37779d 100644 --- a/site/src/content/docs/utilities/align-content.mdx +++ b/site/src/content/docs/utilities/align-content.mdx @@ -181,12 +181,12 @@ Responsive variations also exist for `align-content`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .align-content{breakpoint.abbr}-start
      • -
    • .align-content{breakpoint.abbr}-end
      • -
    • .align-content{breakpoint.abbr}-center
      • -
    • .align-content{breakpoint.abbr}-between
      • -
    • .align-content{breakpoint.abbr}-around
      • -
    • .align-content{breakpoint.abbr}-stretch
      • +
    • .{breakpoint.abbr}align-content-start
      • +
    • .{breakpoint.abbr}align-content-end
      • +
    • .{breakpoint.abbr}align-content-center
      • +
    • .{breakpoint.abbr}align-content-between
      • +
    • .{breakpoint.abbr}align-content-around
      • +
    • .{breakpoint.abbr}align-content-stretch
      •  ) })} diff --git a/site/src/content/docs/utilities/align-items.mdx b/site/src/content/docs/utilities/align-items.mdx index 0e5f05a806..429ec2e4ba 100644 --- a/site/src/content/docs/utilities/align-items.mdx +++ b/site/src/content/docs/utilities/align-items.mdx @@ -59,11 +59,11 @@ Responsive variations also exist for `align-items`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .align-items{breakpoint.abbr}-start
      • -
    • .align-items{breakpoint.abbr}-end
      • -
    • .align-items{breakpoint.abbr}-center
      • -
    • .align-items{breakpoint.abbr}-baseline
      • -
    • .align-items{breakpoint.abbr}-stretch
      • +
    • .{breakpoint.abbr}align-items-start
      • +
    • .{breakpoint.abbr}align-items-end
      • +
    • .{breakpoint.abbr}align-items-center
      • +
    • .{breakpoint.abbr}align-items-baseline
      • +
    • .{breakpoint.abbr}align-items-stretch
      •  ) })} diff --git a/site/src/content/docs/utilities/align-self.mdx b/site/src/content/docs/utilities/align-self.mdx index d0114652d7..dd96135449 100644 --- a/site/src/content/docs/utilities/align-self.mdx +++ b/site/src/content/docs/utilities/align-self.mdx @@ -59,11 +59,11 @@ Responsive variations also exist for `align-self`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .align-self{breakpoint.abbr}-start
      • -
    • .align-self{breakpoint.abbr}-end
      • -
    • .align-self{breakpoint.abbr}-center
      • -
    • .align-self{breakpoint.abbr}-baseline
      • -
    • .align-self{breakpoint.abbr}-stretch
      • +
    • .{breakpoint.abbr}align-self-start
      • +
    • .{breakpoint.abbr}align-self-end
      • +
    • .{breakpoint.abbr}align-self-center
      • +
    • .{breakpoint.abbr}align-self-baseline
      • +
    • .{breakpoint.abbr}align-self-stretch
      •  ) })} diff --git a/site/src/content/docs/utilities/flex.mdx b/site/src/content/docs/utilities/flex.mdx index 1d16019bd0..5cd51e2f9c 100644 --- a/site/src/content/docs/utilities/flex.mdx +++ b/site/src/content/docs/utilities/flex.mdx @@ -31,8 +31,8 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .d{breakpoint.abbr}-flex
      • -
    • .d{breakpoint.abbr}-inline-flex
      • +
    • .{breakpoint.abbr}d-flex
      • +
    • .{breakpoint.abbr}d-inline-flex
      •  ) })} @@ -73,10 +73,10 @@ Responsive variations also exist for `flex-direction`.
        {getSequence(0, 5).map((i) => ( -
      • .flex{getData('breakpoints')[i].abbr}-row
        • -
      • .flex{getData('breakpoints')[i].abbr}-row-reverse
        • -
      • .flex{getData('breakpoints')[i].abbr}-column
        • -
      • .flex{getData('breakpoints')[i].abbr}-column-reverse
        • +
      • .{getData('breakpoints')[i].abbr}flex-row
        • +
      • .{getData('breakpoints')[i].abbr}flex-row-reverse
        • +
      • .{getData('breakpoints')[i].abbr}flex-column
        • +
      • .{getData('breakpoints')[i].abbr}flex-column-reverse
        •  ))}
      @@ -96,7 +96,7 @@ Responsive variations also exist for `flex-fill`.
        {getData('breakpoints').map((breakpoint) => { return ( -
      • .flex{breakpoint.abbr}-fill
        • +
      • .{breakpoint.abbr}flex-fill
        • ) })}
      @@ -124,10 +124,10 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .flex{breakpoint.abbr}-grow-0
      • -
    • .flex{breakpoint.abbr}-grow-1
      • -
    • .flex{breakpoint.abbr}-shrink-0
      • -
    • .flex{breakpoint.abbr}-shrink-1
      • +
    • .{breakpoint.abbr}flex-grow-0
      • +
    • .{breakpoint.abbr}flex-grow-1
      • +
    • .{breakpoint.abbr}flex-shrink-0
      • +
    • .{breakpoint.abbr}flex-shrink-1
      •  ) })} @@ -209,9 +209,9 @@ Responsive variations also exist for `flex-wrap`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .flex{breakpoint.abbr}-nowrap
      • -
    • .flex{breakpoint.abbr}-wrap
      • -
    • .flex{breakpoint.abbr}-wrap-reverse
      • +
    • .{breakpoint.abbr}flex-nowrap
      • +
    • .{breakpoint.abbr}flex-wrap
      • +
    • .{breakpoint.abbr}flex-wrap-reverse
      •  ) })} diff --git a/site/src/content/docs/utilities/float.mdx b/site/src/content/docs/utilities/float.mdx index 06881c1c7d..dcbcc90512 100644 --- a/site/src/content/docs/utilities/float.mdx +++ b/site/src/content/docs/utilities/float.mdx @@ -34,9 +34,9 @@ Here are all the support classes: {getData('breakpoints').map((breakpoint) => { return ( -
    • .float{breakpoint.abbr}-start
      • -
    • .float{breakpoint.abbr}-end
      • -
    • .float{breakpoint.abbr}-none
      • +
    • .{breakpoint.abbr}float-start
      • +
    • .{breakpoint.abbr}float-end
      • +
    • .{breakpoint.abbr}float-none
      •  ) })} diff --git a/site/src/content/docs/utilities/gap.mdx b/site/src/content/docs/utilities/gap.mdx index 8c7435baba..aac5b7dad3 100644 --- a/site/src/content/docs/utilities/gap.mdx +++ b/site/src/content/docs/utilities/gap.mdx @@ -38,7 +38,7 @@ Use gap utilities to control the space between children in flexbox and grid layo Gap utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. -The classes are named using the format `{property}-{size}` for `xs` and `{property}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`. +The classes are named using the format `{property}-{size}` for `xs` and `{breakpoint}:{property}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`. Where *property* is one of: @@ -154,7 +154,7 @@ All gap utilities are responsive and include all breakpoints.
        {getData('breakpoints').map((breakpoint) => { return ( -
      • .gap{breakpoint.abbr}-0 through .gap{breakpoint.abbr}-5
        • +
      • .{breakpoint.abbr}gap-0 through .{breakpoint.abbr}gap-5
        • ) })}
      @@ -162,7 +162,7 @@ All gap utilities are responsive and include all breakpoints.
        {getData('breakpoints').map((breakpoint) => { return ( -
      • .row-gap{breakpoint.abbr}-0 through .row-gap{breakpoint.abbr}-5
        • +
      • .{breakpoint.abbr}row-gap-0 through .{breakpoint.abbr}row-gap-5
        • ) })}
      @@ -170,7 +170,7 @@ All gap utilities are responsive and include all breakpoints.
        {getData('breakpoints').map((breakpoint) => { return ( -
      • .column-gap{breakpoint.abbr}-0 through .column-gap{breakpoint.abbr}-5
        • +
      • .{breakpoint.abbr}column-gap-0 through .{breakpoint.abbr}column-gap-5
        • ) })}
      diff --git a/site/src/content/docs/utilities/grid.mdx b/site/src/content/docs/utilities/grid.mdx index 12f6532b31..3dad24d28a 100644 --- a/site/src/content/docs/utilities/grid.mdx +++ b/site/src/content/docs/utilities/grid.mdx @@ -154,10 +154,10 @@ All grid utilities are responsive and include all breakpoints. {getData('breakpoints').map((breakpoint) => { return ( -
    • .grid-cols{breakpoint.abbr}-3
      • -
    • .grid-cols{breakpoint.abbr}-4
      • -
    • .grid-cols{breakpoint.abbr}-6
      • -
    • .grid-cols{breakpoint.abbr}-fill
      • +
    • .{breakpoint.abbr}grid-cols-3
      • +
    • .{breakpoint.abbr}grid-cols-4
      • +
    • .{breakpoint.abbr}grid-cols-6
      • +
    • .{breakpoint.abbr}grid-cols-fill
      •  ) })} @@ -169,9 +169,9 @@ All grid utilities are responsive and include all breakpoints. {getData('breakpoints').map((breakpoint) => { return ( -
    • .grid-auto-flow{breakpoint.abbr}-row
      • -
    • .grid-auto-flow{breakpoint.abbr}-column
      • -
    • .grid-auto-flow{breakpoint.abbr}-dense
      • +
    • .{breakpoint.abbr}grid-auto-flow-row
      • +
    • .{breakpoint.abbr}grid-auto-flow-column
      • +
    • .{breakpoint.abbr}grid-auto-flow-dense
      •  ) })} diff --git a/site/src/content/docs/utilities/justify-content.mdx b/site/src/content/docs/utilities/justify-content.mdx index 031903bb53..b600b49fa4 100644 --- a/site/src/content/docs/utilities/justify-content.mdx +++ b/site/src/content/docs/utilities/justify-content.mdx @@ -65,12 +65,12 @@ Responsive variations also exist for `justify-content`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .justify-content{breakpoint.abbr}-start
      • -
    • .justify-content{breakpoint.abbr}-end
      • -
    • .justify-content{breakpoint.abbr}-center
      • -
    • .justify-content{breakpoint.abbr}-between
      • -
    • .justify-content{breakpoint.abbr}-around
      • -
    • .justify-content{breakpoint.abbr}-evenly
      • +
    • .{breakpoint.abbr}justify-content-start
      • +
    • .{breakpoint.abbr}justify-content-end
      • +
    • .{breakpoint.abbr}justify-content-center
      • +
    • .{breakpoint.abbr}justify-content-between
      • +
    • .{breakpoint.abbr}justify-content-around
      • +
    • .{breakpoint.abbr}justify-content-evenly
      •  ) })} diff --git a/site/src/content/docs/utilities/justify-items.mdx b/site/src/content/docs/utilities/justify-items.mdx index ce6e46fde0..74a724f090 100644 --- a/site/src/content/docs/utilities/justify-items.mdx +++ b/site/src/content/docs/utilities/justify-items.mdx @@ -55,10 +55,10 @@ Responsive variations also exist for `justify-items`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .justify-items{breakpoint.abbr}-start
      • -
    • .justify-items{breakpoint.abbr}-end
      • -
    • .justify-items{breakpoint.abbr}-center
      • -
    • .justify-items{breakpoint.abbr}-stretch
      • +
    • .{breakpoint.abbr}justify-items-start
      • +
    • .{breakpoint.abbr}justify-items-end
      • +
    • .{breakpoint.abbr}justify-items-center
      • +
    • .{breakpoint.abbr}justify-items-stretch
      •  ) })} diff --git a/site/src/content/docs/utilities/margin.mdx b/site/src/content/docs/utilities/margin.mdx index 632836aa69..5be011b7b1 100644 --- a/site/src/content/docs/utilities/margin.mdx +++ b/site/src/content/docs/utilities/margin.mdx @@ -44,7 +44,7 @@ Use margin utilities to control the outer space around elements. Margin utilitie Margin utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. -The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`. +The classes are named using the format `{property}{sides}-{size}` for `xs` and `{breakpoint}:{property}{sides}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`. Where *property* is: @@ -185,7 +185,7 @@ All margin utilities are responsive and include all breakpoints.
        {getData('breakpoints').map((breakpoint) => { return ( -
      • .m{breakpoint.abbr}-0 through .m{breakpoint.abbr}-5 and .m{breakpoint.abbr}-auto
        • +
      • .{breakpoint.abbr}m-0 through .{breakpoint.abbr}m-5 and .{breakpoint.abbr}m-auto
        • ) })}
      diff --git a/site/src/content/docs/utilities/padding.mdx b/site/src/content/docs/utilities/padding.mdx index bda866ac88..d63b8be7de 100644 --- a/site/src/content/docs/utilities/padding.mdx +++ b/site/src/content/docs/utilities/padding.mdx @@ -40,7 +40,7 @@ Use padding utilities to control the inner space within elements. Padding utilit Padding utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. -The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`. +The classes are named using the format `{property}{sides}-{size}` for `xs` and `{breakpoint}:{property}{sides}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`. Where *property* is: @@ -151,7 +151,7 @@ All padding utilities are responsive and include all breakpoints.
        {getData('breakpoints').map((breakpoint) => { return ( -
      • .p{breakpoint.abbr}-0 through .p{breakpoint.abbr}-5
        • +
      • .{breakpoint.abbr}p-0 through .{breakpoint.abbr}p-5
        • ) })}
      diff --git a/site/src/content/docs/utilities/place-items.mdx b/site/src/content/docs/utilities/place-items.mdx index 6ac63db905..98bb2613dd 100644 --- a/site/src/content/docs/utilities/place-items.mdx +++ b/site/src/content/docs/utilities/place-items.mdx @@ -55,10 +55,10 @@ Responsive variations also exist for `place-items`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .place-items{breakpoint.abbr}-start
      • -
    • .place-items{breakpoint.abbr}-end
      • -
    • .place-items{breakpoint.abbr}-center
      • -
    • .place-items{breakpoint.abbr}-stretch
      • +
    • .{breakpoint.abbr}place-items-start
      • +
    • .{breakpoint.abbr}place-items-end
      • +
    • .{breakpoint.abbr}place-items-center
      • +
    • .{breakpoint.abbr}place-items-stretch
      •  ) })} diff --git a/site/src/content/docs/utilities/text-alignment.mdx b/site/src/content/docs/utilities/text-alignment.mdx index b19869754c..b2aa96d5c6 100644 --- a/site/src/content/docs/utilities/text-alignment.mdx +++ b/site/src/content/docs/utilities/text-alignment.mdx @@ -35,9 +35,9 @@ Responsive variations also exist for `text-align`. {getData('breakpoints').map((breakpoint) => { return ( -
    • .text{breakpoint.abbr}-start
      • -
    • .text{breakpoint.abbr}-center
      • -
    • .text{breakpoint.abbr}-end
      • +
    • .{breakpoint.abbr}text-start
      • +
    • .{breakpoint.abbr}text-center
      • +
    • .{breakpoint.abbr}text-end
      •  ) })}