diff --git a/docs/components/forms.md b/docs/components/forms.md index 8748d8455c..ba69ce2d83 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -22,7 +22,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
- We'll never share your email with anyone else. + We'll never share your email with anyone else.
@@ -55,7 +55,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
- This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. + This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons @@ -310,9 +310,9 @@ Because of this, you may need to manually address the width and alignment of ind
-
-
- Example help text that remains unchanged. + Example help text that remains unchanged.
- Example help text that remains unchanged. + Example help text that remains unchanged.
{% endexample %} diff --git a/scss/_forms.scss b/scss/_forms.scss index 7651c10668..263a8bc156 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -181,6 +181,11 @@ select.form-control-lg { margin-bottom: $form-group-margin-bottom; } +.form-text { + display: block; + margin-top: ($spacer * .25); +} + // Checkboxes and radios // @@ -244,7 +249,7 @@ select.form-control-lg { // Apply contextual and semantic states to individual form controls. .form-control-feedback { - margin-top: .5rem; + margin-top: ($spacer * .25); } .form-control-success, @@ -337,19 +342,16 @@ select.form-control-lg { // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. - .radio, - .checkbox { + .form-check { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; - - label { - padding-left: 0; - } } - .radio input[type="radio"], - .checkbox input[type="checkbox"] { + .form-check-label { + padding-left: 0; + } + .form-check-input { position: relative; margin-left: 0; }