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.
-
-
Input with warning
Shucks, check the formatting of that and try again.
- Example help text that remains unchanged.
+ Example help text that remains unchanged.
Input with danger
Shit, that username's taken. Try another?
- 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;
}