diff --git a/docs/components/forms.md b/docs/components/forms.md index 63dfd46b406fc46b4a92dc4a228f9bf0e41af050..f1cfcd65e53abc312cef42439c9ffa23fd323ff9 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -663,6 +663,8 @@ Block help text—for below inputs or for longer lines of help text—can be eas Bootstrap includes validation styles for danger, warning, and success states on form controls. - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. +- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, or custom form element will receive the validation styles. +- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state. - Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state. - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling. - Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass. diff --git a/scss/_forms.scss b/scss/_forms.scss index 2614c119ffb061225810b5ed64aa83ce00789c0a..c969531fba99230fe6105495368319064c08a56b 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -265,6 +265,10 @@ input[type="checkbox"] { // // Apply contextual and semantic states to individual form controls. +.form-control-feedback { + margin-top: .5rem; +} + .form-control-success, .form-control-warning, .form-control-danger { diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index b87429c1b0798f67ee90aa9dafb554d9e5a716ca..e0ab7dbcacbbc78fcb82ef2559f884a59c75d9b3 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -5,7 +5,7 @@ @mixin form-control-validation($color) { // Color the label and help text - .text-help, + .form-control-feedback, .form-control-label, .radio, .checkbox,