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:
parent
a56bf1de9f
commit
51ca9a9e2f
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user