aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIssermann Hannah <[email protected]>2023-01-13 15:59:08 +0100
committerMark Otto <[email protected]>2023-01-15 09:48:17 -0800
commit8865b469c353db7b94e07c13abbfdf7d27858386 (patch)
treee0397903ae7fe36b7fe321e9ca4b40f5c8c6bb99
parent17f14ac39f6f9586eda46b1b657a293b5ca23bf4 (diff)
downloadbootstrap-8865b469c353db7b94e07c13abbfdf7d27858386.tar.xz
bootstrap-8865b469c353db7b94e07c13abbfdf7d27858386.zip
Move form-text paragraph to Form control page instead of overview to have teh documentation in the same page than sass variables.
-rw-r--r--site/content/docs/5.3/forms/form-control.md36
-rw-r--r--site/content/docs/5.3/forms/overview.md36
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 4df1caa2b..b2abeb7c2 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`.
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
{{< /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 >}}
+<label for="inputPassword5" class="form-label">Password</label>
+<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
+<div id="passwordHelpBlock" class="form-text">
+ Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
+</div>
+{{< /example >}}
+
+Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
+
+{{< example >}}
+<div class="row g-3 align-items-center">
+ <div class="col-auto">
+ <label for="inputPassword6" class="col-form-label">Password</label>
+ </div>
+ <div class="col-auto">
+ <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
+ </div>
+ <div class="col-auto">
+ <span id="passwordHelpInline" class="form-text">
+ Must be 8-20 characters long.
+ </span>
+ </div>
+</div>
+{{< /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 a1493a6ab..119f9f2b9 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
</form>
{{< /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 >}}
-<label for="inputPassword5" class="form-label">Password</label>
-<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
-<div id="passwordHelpBlock" class="form-text">
- Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
-</div>
-{{< /example >}}
-
-Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
-
-{{< example >}}
-<div class="row g-3 align-items-center">
- <div class="col-auto">
- <label for="inputPassword6" class="col-form-label">Password</label>
- </div>
- <div class="col-auto">
- <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
- </div>
- <div class="col-auto">
- <span id="passwordHelpInline" class="form-text">
- Must be 8-20 characters long.
- </span>
- </div>
-</div>
-{{< /example >}}
-
## Disabled forms
Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.