Skip to content

Commit 8865b46

Browse files
hannahissmdo
authored andcommitted
Move form-text paragraph to Form control page instead of overview to have teh documentation in the same page than sass variables.
1 parent 17f14ac commit 8865b46

File tree

2 files changed

+36
-36
lines changed

2 files changed

+36
-36
lines changed

site/content/docs/5.3/forms/form-control.md

+36
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,42 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
3131
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
3232
{{< /example >}}
3333

34+
## Form text
35+
36+
Block-level or inline-level form text can be created using `.form-text`.
37+
38+
{{< callout warning >}}
39+
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.
40+
{{< /callout >}}
41+
42+
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.
43+
44+
{{< example >}}
45+
<label for="inputPassword5" class="form-label">Password</label>
46+
<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
47+
<div id="passwordHelpBlock" class="form-text">
48+
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
49+
</div>
50+
{{< /example >}}
51+
52+
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.
53+
54+
{{< example >}}
55+
<div class="row g-3 align-items-center">
56+
<div class="col-auto">
57+
<label for="inputPassword6" class="col-form-label">Password</label>
58+
</div>
59+
<div class="col-auto">
60+
<input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
61+
</div>
62+
<div class="col-auto">
63+
<span id="passwordHelpInline" class="form-text">
64+
Must be 8-20 characters long.
65+
</span>
66+
</div>
67+
</div>
68+
{{< /example >}}
69+
3470
## Disabled
3571

3672
Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

site/content/docs/5.3/forms/overview.md

-36
Original file line numberDiff line numberDiff line change
@@ -51,42 +51,6 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
5151
</form>
5252
{{< /example >}}
5353

54-
## Form text
55-
56-
Block-level or inline-level form text can be created using `.form-text`.
57-
58-
{{< callout warning >}}
59-
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.
60-
{{< /callout >}}
61-
62-
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.
63-
64-
{{< example >}}
65-
<label for="inputPassword5" class="form-label">Password</label>
66-
<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
67-
<div id="passwordHelpBlock" class="form-text">
68-
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
69-
</div>
70-
{{< /example >}}
71-
72-
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.
73-
74-
{{< example >}}
75-
<div class="row g-3 align-items-center">
76-
<div class="col-auto">
77-
<label for="inputPassword6" class="col-form-label">Password</label>
78-
</div>
79-
<div class="col-auto">
80-
<input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
81-
</div>
82-
<div class="col-auto">
83-
<span id="passwordHelpInline" class="form-text">
84-
Must be 8-20 characters long.
85-
</span>
86-
</div>
87-
</div>
88-
{{< /example >}}
89-
9054
## Disabled forms
9155

9256
Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.

0 commit comments

Comments
 (0)