root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Add `.form-check-reverse` modifier class (#33606) 

* Add .form-check-reverse modifier class

* Update checks-radios.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto 2022-02-08 12:33:39 -08:00 committed by GitHub
parent 71a211f2bd
commit 4308b67e59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
scss/forms/_form-check.scss
View File

@ -14,6 +14,18 @@
} }
} }
.form-check-reverse {
padding-right: $form-check-padding-start;
padding-left: 0;
text-align: right;
.form-check-input {
float: right;
margin-right: $form-check-padding-start * -1;
margin-left: 0;
}
}
.form-check-input { .form-check-input {
width: $form-check-input-width; width: $form-check-input-width;
height: $form-check-input-width; height: $form-check-input-width;
@ -130,6 +142,16 @@
} }
} }
} }
&.form-check-reverse {
padding-right: $form-switch-padding-start;
padding-left: 0;
.form-check-input {
margin-right: $form-switch-padding-start * -1;
margin-left: 0;
}
}
} }
.form-check-inline { .form-check-inline {

24
site/content/docs/5.1/forms/checks-radios.md
View File

@ -197,6 +197,30 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
</div> </div>
{{< /example >}} {{< /example >}}
## Reverse
Put your checkboxes, radios, and switches on the opposite side with the `.form-check-reverse` modifier class.
{{< example >}}
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">
Reverse checkbox
</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
<label class="form-check-label" for="reverseCheck2">
Disabled reverse checkbox
</label>
</div>
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
<label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>
{{< /example >}}
## Without labels ## Without labels
Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details. Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.