0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00

Update checks and radios in input groups (#32912)

- Adds .mt-0 to the examples
- Zero-ing out universally for all of them like in #32896 would cause issues for those who include the input with visible label text, where the text and input would be misaligned
This commit is contained in:
Mark Otto 2021-01-28 01:39:36 -08:00 committed by GitHub
parent a56bf1de9f
commit 51ca9a9e2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -81,19 +81,19 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
## Checkboxes and radios ## Checkboxes and radios
Place any checkbox or radio option within an input group's addon instead of text. Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input.
{{< example >}} {{< example >}}
<div class="input-group mb-3"> <div class="input-group mb-3">
<div class="input-group-text"> <div class="input-group-text">
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input"> <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
</div> </div>
<input type="text" class="form-control" aria-label="Text input with checkbox"> <input type="text" class="form-control" aria-label="Text input with checkbox">
</div> </div>
<div class="input-group"> <div class="input-group">
<div class="input-group-text"> <div class="input-group-text">
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input"> <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
</div> </div>
<input type="text" class="form-control" aria-label="Text input with radio button"> <input type="text" class="form-control" aria-label="Text input with radio button">
</div> </div>