[v5] form-check-input inside input-group-text is not vertically centered

[bggardner]

• Operating system and version: Ubuntu 20.10 and Windows 10
• Browser and version: Chrome 87 and Firefox 84
• Compare:
  • v5.0: https://getbootstrap.com/docs/5.0/forms/input-group/#checkboxes-and-radios
  • v4.6: https://getbootstrap.com/docs/4.6/components/input-group/#checkboxes-and-radios

In v5.0, checkboxes and radios inside .input-group-text elements appear too low (not vertically centered) due to margin-top: .25em set by .form-check-input. v4.6 has:

.input-group-text input[type=checkbox, .input-group-text input[type=radio] { margin-top: 0; }

The fix would be to add either the same as v4.6 or .input-group-text .form-check-input { margin-top: 0; }

[bggardner]

Alternatively, change the docs example to put the checkbox inside a .form-check, which appears to vertically center the checkbox:

<div class="input-group mb-3">
  <div class="input-group-text">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-text">
    <div class="form-check">
      <input class="form-check-input" 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">
</div>

However, this adds extra whitespace on the right/end, so it is only a solution if followed by a text label.