diff options
| author | Mark Otto <[email protected]> | 2021-04-10 19:58:24 +0300 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2021-09-07 21:57:20 +0300 |
| commit | 3ae9ffad77626f5e0a5690fd3c339dccdc5c63c1 (patch) | |
| tree | fe976fde3ef4bfc1153cd2bb2e7f1fede0208fe5 /site | |
| parent | 0d81d3cbc14dfcdca8a868e3f25189a4f1ab273c (diff) | |
| download | bootstrap-form-check-reverse.tar.xz bootstrap-form-check-reverse.zip | |
Add .form-check-reverse modifier classform-check-reverse
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.1/forms/checks-radios.md | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/site/content/docs/5.1/forms/checks-radios.md b/site/content/docs/5.1/forms/checks-radios.md index 0f5507f54..0d61eb3fe 100644 --- a/site/content/docs/5.1/forms/checks-radios.md +++ b/site/content/docs/5.1/forms/checks-radios.md @@ -197,6 +197,30 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl </div> {{< /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">Rerverse switch checkbox input</label> +</div> +{{< /example >}} + ## 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. |