diff options
| author | Issermann Hannah <[email protected]> | 2023-01-13 15:59:08 +0100 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2023-01-15 09:48:17 -0800 |
| commit | 8865b469c353db7b94e07c13abbfdf7d27858386 (patch) | |
| tree | e0397903ae7fe36b7fe321e9ca4b40f5c8c6bb99 | |
| parent | 17f14ac39f6f9586eda46b1b657a293b5ca23bf4 (diff) | |
| download | bootstrap-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.md | 36 | ||||
| -rw-r--r-- | 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 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. |
