diff --git a/scss/_forms.scss b/scss/_forms.scss index fe95fd2797..39ba90d672 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,4 +1,5 @@ @import "forms/labels"; +@import "forms/form-text"; @import "forms/form-control"; @import "forms/form-select"; @import "forms/form-check"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 8d7c56afa2..6597e10adf 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -565,6 +565,11 @@ $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-style: null !default; +$form-text-color: $text-muted !default; + $form-label-margin-bottom: .5rem !default; $form-label-font-size: null !default; $form-label-font-style: null !default; @@ -669,8 +674,6 @@ $form-switch-checked-color: $component-active-color !default; $form-switch-checked-bg-image: url("data:image/svg+xml,") !default; $form-switch-checked-bg-position: right center !default; -$form-text-margin-top: .25rem !default; - $form-check-inline-margin-right: 1rem !default; $input-group-addon-color: $input-color !default; diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss new file mode 100644 index 0000000000..3691afcfc3 --- /dev/null +++ b/scss/forms/_form-text.scss @@ -0,0 +1,11 @@ +// +// Form text +// + +.form-text { + display: block; + margin-top: $form-text-margin-top; + @include font-size($form-text-font-size); + font-style: $form-text-font-style; + color: $form-text-color; +} diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index fb3cd68cb7..3133a2f195 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 `