diff --git a/docs/components/forms.md b/docs/components/forms.md index dd3e0027f6c67a6e7f8e3fc29cff02e169b8d2f5..4cbf204121de68d7f98b947642be3fb13a6bee62 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 diff --git a/scss/_forms.scss b/scss/_forms.scss index 5ea3963e42e0ba6b522b8d2388ca31f6977cdeef..87e5491219e8e0449fa66e177c1b04f55783543f 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -235,20 +235,14 @@ select.form-control-lg { // Radios and checkboxes on same line .form-check-inline { - position: relative; display: inline-block; - padding-left: 1.25rem; - margin-bottom: 0; // Override default `<label>` bottom margin - vertical-align: middle; - cursor: pointer; - + .form-check-inline { - margin-left: .75rem; + .form-check-label { + vertical-align: middle; } - &.disabled { - color: $text-muted; - cursor: $cursor-disabled; + + .form-check-inline { + margin-left: .75rem; } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 280849536aebf283363e031884ecba12b3b6ef79..c8aea9669d821edec49e233bc9d4fb97dbb0440a 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -9,7 +9,6 @@ .form-control-label, .col-form-label, .form-check-label, - .form-check-inline, .custom-control { color: $color; }