From cfd6e92ff614a13729e04629a914d6bce9f94ae6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Oct 2016 16:35:47 -0700 Subject: [PATCH 1/3] include .col-form-label in the form validation field mixin --- scss/mixins/_forms.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 349aee912b..280849536a 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -7,6 +7,7 @@ // Color the label and help text .form-control-feedback, .form-control-label, + .col-form-label, .form-check-label, .form-check-inline, .custom-control { From a6cd4937af4c095714095ca2b0ac457a6d5ebb92 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Oct 2016 16:36:09 -0700 Subject: [PATCH 2/3] rework some copy --- docs/components/forms.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/components/forms.md b/docs/components/forms.md index 040f4f7e5e..cf5a8473e7 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -682,7 +682,11 @@ Inline text can use any typical inline HTML element (be it a ``, `` ## Validation -Bootstrap includes validation styles for danger, warning, and success states on form controls. Here's a rundown of how they work: +Bootstrap includes validation styles for danger, warning, and success states on most form controls. + +### How it works + +Here's a rundown of how they work: - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.col-form-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. @@ -690,14 +694,14 @@ Bootstrap includes validation styles for danger, warning, and success states on - 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. +### Defining states + Generally speaking, you'll want to use a particular state for specific types of feedback: - **Danger** is great for when there's a blocking or required field. A user *must* fill in this field properly to submit the form. - **Warning** works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form. - And lastly, **success** is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields. -Here are some examples of the aforementioned classes in action. - {% comment %} {% callout warning %} #### Conveying validation state to assistive technologies and colorblind users @@ -708,6 +712,10 @@ Ensure that an alternative indication of state is also provided. For instance, y {% endcallout %} {% endcomment %} +### Examples + +Here are some examples of the aforementioned classes in action. First up is your standard left-aligned fields with labels, help text, and validation messaging. + {% example html %}
From 6a11ae580d0e233449aefdaf250b08019d7fe96d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Oct 2016 16:38:30 -0700 Subject: [PATCH 3/3] add horizontal form examples --- docs/components/forms.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/docs/components/forms.md b/docs/components/forms.md index cf5a8473e7..2a2e9f9d23 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -737,6 +737,41 @@ Here are some examples of the aforementioned classes in action. First up is your
{% endexample %} +Those same states can also be used with horizontal forms. + +{% example html %} +
+
+
+ +
+ + + Example help text that remains unchanged. +
+
+
+ +
+ + + Example help text that remains unchanged. +
+
+
+ +
+ + + Example help text that remains unchanged. +
+
+
+
+{% endexample %} + +Checkboxes and radios are also supported. + {% example html %}