From 8865b469c353db7b94e07c13abbfdf7d27858386 Mon Sep 17 00:00:00 2001 From: Issermann Hannah Date: Fri, 13 Jan 2023 15:59:08 +0100 Subject: [PATCH] Move form-text paragraph to Form control page instead of overview to have teh documentation in the same page than sass variables. --- site/content/docs/5.3/forms/form-control.md | 36 +++++++++++++++++++++ site/content/docs/5.3/forms/overview.md | 36 --------------------- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/site/content/docs/5.3/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md index 4df1caa2b996..b2abeb7c2469 100644 --- a/site/content/docs/5.3/forms/form-control.md +++ b/site/content/docs/5.3/forms/form-control.md @@ -31,6 +31,42 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`. {{< /example >}} +## Form text + +Block-level or inline-level form text can be created using `.form-text`. + +{{< callout warning >}} +Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. +{{< /callout >}} + +Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. + +{{< example >}} + + +
+ Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. +
+{{< /example >}} + +Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than the `.form-text` class. + +{{< example >}} +
+
+ +
+
+ +
+
+ + Must be 8-20 characters long. + +
+
+{{< /example >}} + ## Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing. diff --git a/site/content/docs/5.3/forms/overview.md b/site/content/docs/5.3/forms/overview.md index a1493a6abf38..119f9f2b9e37 100644 --- a/site/content/docs/5.3/forms/overview.md +++ b/site/content/docs/5.3/forms/overview.md @@ -51,42 +51,6 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for {{< /example >}} -## Form text - -Block-level or inline-level form text can be created using `.form-text`. - -{{< callout warning >}} -Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. -{{< /callout >}} - -Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. - -{{< example >}} - - -
- Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. -
-{{< /example >}} - -Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than the `.form-text` class. - -{{< example >}} -
-
- -
-
- -
-
- - Must be 8-20 characters long. - -
-
-{{< /example >}} - ## Disabled forms Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.