diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/forms.md | 53 |
1 files changed, 32 insertions, 21 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index dd3e0027f..4cbf20412 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -152,8 +152,7 @@ Below is a complete list of the specific form controls supported by Bootstrap an <tr> <td class="text-nowrap"> {% markdown %} -`.form-check`<br> -`.form-check-inline` +`.form-check` {% endmarkdown %} </td> <td class="text-nowrap"> @@ -463,30 +462,42 @@ By default, any number of checkboxes and radios that are immediate sibling will ### Inline -Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`. +Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`. {% example html %} -<label class="form-check-inline"> - <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3 -</label> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1 + </label> +</div> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2 + </label> +</div> +<div class="form-check form-check-inline disabled"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3 + </label> +</div> {% endexample %} {% example html %} -<label class="form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 -</label> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 + </label> +</div> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 + </label> +</div> +<div class="form-check form-check-inline disabled"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3 + </label> +</div> {% endexample %} ### Without labels |