aboutsummaryrefslogtreecommitdiff
path: root/docs/components/forms.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2016-09-15 10:20:57 -0700
committerMark Otto <[email protected]>2016-09-15 10:20:57 -0700
commit64dcb8b5073293daa911d2b274fd875f31693317 (patch)
tree112821f9bdd9b51f8953521cc2f34a537ccf74a2 /docs/components/forms.md
parent15f522fd4ae3fe7933d526f045b0b2df22a35291 (diff)
parent63129112bbea91f7cd62014f162f857f50084656 (diff)
downloadbootstrap-64dcb8b5073293daa911d2b274fd875f31693317.tar.xz
bootstrap-64dcb8b5073293daa911d2b274fd875f31693317.zip
Merge branch 'v4-dev' into v4-navbars
Diffstat (limited to 'docs/components/forms.md')
-rw-r--r--docs/components/forms.md51
1 files changed, 25 insertions, 26 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md
index ba69ce2d8..09d0d4f8f 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -59,28 +59,29 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
- <div class="radio">
- <label>
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
- <div class="radio">
- <label>
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+ <div class="form-check">
+ <label class="form-check-label">
+ <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
- <div class="radio disabled">
- <label>
- <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+ <div class="form-check disabled">
+ <label class="form-check-label">
+ <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Check me out
+ <div class="form-check">
+ <label class="form-check-label">
+ <input type="checkbox" class="form-check-input">
+ Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
@@ -150,10 +151,8 @@ Below is a complete list of the specific form controls supported by Bootstrap an
<tr>
<td class="text-nowrap">
{% markdown %}
-`.radio`<br>
-`.radio-inline`<br>
-`.checkbox`<br>
-`.checkbox-inline`
+`.form-check`<br>
+`.form-check-inline`
{% endmarkdown %}
</td>
<td class="text-nowrap">
@@ -724,27 +723,27 @@ Ensure that an alternative indication of state is also provided. For instance, y
<div class="form-group has-danger">
<label class="col-form-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
- <div class="form-control-feedback">Shit, that username's taken. Try another?</div>
+ <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
{% endexample %}
{% example html %}
-<div class="checkbox has-success">
- <label>
- <input type="checkbox" id="checkboxSuccess" value="option1">
+<div class="form-check has-success">
+ <label class="form-check-label">
+ <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
-<div class="checkbox has-warning">
- <label>
- <input type="checkbox" id="checkboxWarning" value="option1">
+<div class="form-check has-warning">
+ <label class="form-check-label">
+ <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
-<div class="checkbox has-danger">
- <label>
- <input type="checkbox" id="checkboxDanger" value="option1">
+<div class="form-check has-danger">
+ <label class="form-check-label">
+ <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
Checkbox with danger
</label>
</div>