]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Move form-text paragraph to Form control page instead of overview to have teh documen...
authorIssermann Hannah <hannah.issermann@orange.com>
Fri, 13 Jan 2023 14:59:08 +0000 (15:59 +0100)
committerMark Otto <otto@github.com>
Sun, 15 Jan 2023 17:48:17 +0000 (09:48 -0800)
site/content/docs/5.3/forms/form-control.md
site/content/docs/5.3/forms/overview.md

index 4df1caa2b996b816289690f7ad36d0ecbc861b82..b2abeb7c2469b2668722f7e81194b33136bd490e 100644 (file)
@@ -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.
index a1493a6abf389ce9c4b0f7af29bb2a47b2a7fa4e..119f9f2b9e373d6775b7f8c820f96e1ca4128f26 100644 (file)
@@ -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.