From 844aab4295bc929f7c38cf558fee4a80e5494d6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 10 Mar 2021 21:06:54 -0800 Subject: [PATCH 1/4] Fixes some copy around inline forms --- site/content/docs/5.0/forms/layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.0/forms/layout.md index f0fc0b582..47e2f8ab7 100644 --- a/site/content/docs/5.0/forms/layout.md +++ b/site/content/docs/5.0/forms/layout.md @@ -292,7 +292,7 @@ You can then remix that once again with size-specific column classes. ## Inline forms -Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. +Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. {{< example >}}
From defce830276d04238350c2b738b1d02197c6e37d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 12 Feb 2021 10:51:18 -0800 Subject: [PATCH 2/4] Add ol.list-group with psuedo-element numbers --- scss/_list-group.scss | 13 ++++++ .../content/docs/5.0/components/list-group.md | 42 +++++++++++++++++++ 2 files changed, 55 insertions(+) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 7e23b8e0c..ecacb05f2 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -12,6 +12,19 @@ @include border-radius($list-group-border-radius); } +// stylelint-disable selector-no-qualifying-type +ol.list-group { + list-style-type: none; + counter-reset: section; + + > li::before { + // Increments only this instance of the section counter + content: counters(section, ".") ". "; + counter-increment: section; + } +} +// stylelint-enable selector-no-qualifying-type + // Interactive list items // diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 1ac5a9a2b..4caaeb8de 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -94,6 +94,48 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis {{< /example >}} +## Ordered list + +Replace the unordered list element with an ordered list to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
    `s default browser styling) for better placement inside list group items and to allow for better customization. + +Numbers are generated by `counter-reset` on the `
      `, and then styled and placed with a `::before` psuedo-element on the `
    1. ` with `counter-increment` and `content`. + +{{< example >}} +
        +
      1. Cras justo odio
        2. +
      2. Cras justo odio
        3. +
      3. Cras justo odio
        4. +
      +{{< /example >}} + +These work great with custom content as well. + +{{< example >}} +
        +
      1. +
        +
        Subheading
        + Cras justo odio +
        + 14 +
        2. +
      2. +
        +
        Subheading
        + Cras justo odio +
        + 14 +
        3. +
      3. +
        +
        Subheading
        + Cras justo odio +
        + 14 +
        4. +
      +{{< /example >}} + ## 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|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** From 5c6e72c6fea2cef2c7e169ed1d68f9146081d246 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 10 Mar 2021 21:49:47 -0800 Subject: [PATCH 3/4] Change from element selector to the opt-in class --- scss/_list-group.scss | 4 +--- site/content/docs/5.0/components/list-group.md | 8 ++++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ecacb05f2..2193168c5 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -12,8 +12,7 @@ @include border-radius($list-group-border-radius); } -// stylelint-disable selector-no-qualifying-type -ol.list-group { +.list-group-numbered { list-style-type: none; counter-reset: section; @@ -23,7 +22,6 @@ ol.list-group { counter-increment: section; } } -// stylelint-enable selector-no-qualifying-type // Interactive list items diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 4caaeb8de..6cad46a4d 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -94,14 +94,14 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis {{< /example >}} -## Ordered list +## Numbered -Replace the unordered list element with an ordered list to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
        `s default browser styling) for better placement inside list group items and to allow for better customization. +Add the `.list-group-numbered` modifier class (and optionally use an `
          ` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
            `s default browser styling) for better placement inside list group items and to allow for better customization. Numbers are generated by `counter-reset` on the `
              `, and then styled and placed with a `::before` psuedo-element on the `
            1. ` with `counter-increment` and `content`. {{< example >}} -
                +
                1. Cras justo odio
                2. Cras justo odio
                3. Cras justo odio
                  4. @@ -111,7 +111,7 @@ Numbers are generated by `counter-reset` on the `
                    `, and then styled and plac These work great with custom content as well. {{< example >}} -
                      +
                      1. Subheading
                        From 6b3254536bac263c39e3a536c3c13945210d91b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 10 Mar 2021 21:51:34 -0800 Subject: [PATCH 4/4] Add migration guide entry --- site/content/docs/5.0/migration.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 3e5fb22e1..6eaca9f96 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -9,6 +9,10 @@ toc: true ## v5.0.0-beta3 +### Components + +- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups. + ### JavaScript - All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin: