diff --git a/scss/_variables.scss b/scss/_variables.scss index 419ff183003b..a6e47b2857cc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -570,7 +570,7 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease // Forms $form-text-margin-top: .25rem !default; -$form-text-font-size: null !default; +$form-text-font-size: $small-font-size !default; $form-text-font-style: null !default; $form-text-color: $text-muted !default; @@ -772,7 +772,8 @@ $form-file-height-lg: $input-height-lg !default; // Form validation $form-feedback-margin-top: $form-text-margin-top !default; -$form-feedback-font-size: $small-font-size !default; +$form-feedback-font-size: $form-text-font-size !default; +$form-feedback-font-style: $form-text-font-style !default; $form-feedback-valid-color: $success !default; $form-feedback-invalid-color: $danger !default; diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss index 3691afcfc335..e25bbeb1d83b 100644 --- a/scss/forms/_form-text.scss +++ b/scss/forms/_form-text.scss @@ -3,7 +3,6 @@ // .form-text { - display: block; margin-top: $form-text-margin-top; @include font-size($form-text-font-size); font-style: $form-text-font-style; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 7abfd23bfb25..5166583714da 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -19,6 +19,7 @@ width: 100%; margin-top: $form-feedback-margin-top; @include font-size($form-feedback-font-size); + font-style: $form-feedback-font-style; color: $color; } diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md index 6e83c99ceff7..41db3a9f92a4 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
- We'll never share your email with anyone else. +
We'll never share your email with anyone else.
@@ -53,7 +53,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for ## Form text -Block-level form text in forms can be created using `.form-text`. +Block-level or inline-level form text can be created using `.form-text`. {{< callout warning >}} ##### Associating form text with form controls @@ -61,17 +61,17 @@ Block-level form text in forms can be created using `.form-text`. 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 >}} -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. +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 >}} - +
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. - +
{{< /example >}} -Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than a utility class. +Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than the `.form-text` class. {{< example >}}
@@ -82,9 +82,9 @@ Inline text can use any typical inline HTML element (be it a ``, ``
- + Must be 8-20 characters long. - +
{{< /example >}}