diff options
| author | Catalin Zalog <[email protected]> | 2020-04-14 09:21:13 +0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-04-14 09:21:13 +0300 |
| commit | e2afbbfa828418dd93c8de8c1c2ce60361d04fbf (patch) | |
| tree | 9b1f31542dded29f5c232fd20f826e174c6c4dc1 /site/content/docs | |
| parent | 789bcf6ad6f2eab15df1de50df384731330bca3c (diff) | |
| download | bootstrap-e2afbbfa828418dd93c8de8c1c2ce60361d04fbf.tar.xz bootstrap-e2afbbfa828418dd93c8de8c1c2ce60361d04fbf.zip | |
Restore `.form-text` (#30565)
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/4.3/forms/layout.md | 2 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/overview.md | 14 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 1 |
3 files changed, 8 insertions, 9 deletions
diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index fb3cd68cb..3133a2f19 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -18,7 +18,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for ## Utilities -[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional help text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency. +[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency. Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element. diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md index a4cc78008..6e83c99ce 100644 --- a/site/content/docs/4.3/forms/overview.md +++ b/site/content/docs/4.3/forms/overview.md @@ -37,7 +37,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> - <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> + <small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> @@ -51,22 +51,22 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for </form> {{< /example >}} -## Help text +## Form text -Block-level help text in forms can be created using `.form-text` (previously known as `.help-block` in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`. +Block-level form text in forms can be created using `.form-text`. {{< callout warning >}} -##### Associating help text with form controls +##### Associating form text with form controls -Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control. +Form text should be explicitly associated with the form control it relates to using the `aria-describedby` 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 >}} -Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above. +Form text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin 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-describedby="passwordHelpBlock"> -<small id="passwordHelpBlock" class="form-text text-muted"> +<small 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. </small> {{< /example >}} diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 2d73328d1..736115af2 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -101,7 +101,6 @@ Changes to Reboot, typography, tables, and more. - Dropped `.form-row` for the more flexible grid gutters. - Dropped `.form-inline` for the more flexible grid. - Dropped support for `.form-control-plaintext` inside `.input-group`s. -- Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`). - Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. - Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476) |
