Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #20936 make inline checkbox/radio markup same as stacked #20995

Merged
merged 2 commits into from
Nov 29, 2016
Merged

Fix #20936 make inline checkbox/radio markup same as stacked #20995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27f8903
#20936 make inline checkbox/radio markup same as stacked
bkdotcom Oct 25, 2016
09de502
tweak language and remove extra blank line in snippet
mdo Nov 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 32 additions & 21 deletions docs/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -471,30 +470,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
Expand Down
14 changes: 4 additions & 10 deletions scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
1 change: 0 additions & 1 deletion scss/mixins/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
.form-control-feedback,
.form-control-label,
.form-check-label,
.form-check-inline,
.custom-control {
color: $color;
}
Expand Down