Inconsistent checkbox placement when a hidden element is between a legend and .form-check

• Operating system: macOS 10.15.6
• Browser: Chrome 84.0.4147.105

In the alpha for 5.0.0 when a legend is followed by a hidden element (tested with .d-none and input[type="hidden"]) and div.form-check, then the checkbox will be on the same line as the legend but not the label, and also makes the checkbox not clickable (though it’s possible to check by focusing on it). This seems to be the case with normal checkboxes and switches.

Example problematic markup:

<form>
  <fieldset>
    <legend>Unexpected</legend>

    <p class="d-none">Hello</p>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="foo">
      <label class="form-check-label" for="foo">Foo</label>
    </div>
  </fieldset>
</form>

Produces this

I would expect it to lay out like this (and also be clickable)

Code Pen https://codepen.io/tegandbiscuits/pen/poygjPE

The current behavior is also not what happens with checkboxes in Bootstrap 4.

Also this seems to be able to be resolved by wrapping both the hidden element and .form-check in a div.

[mdo]

Thinking about this specific example again, you might just want to add a good ol’ fashioned <div class="clearfix"></div> before the hidden element. That’ll fix the issue.

[ffoodd]

Tried something using display: contents but then realized support is pretty bad and buggy…

There might be a better way using grid or something, not sure yet.

TBH, I’d be in favor of dropping float: left here, since our standard build does not need it —no borders on fieldset— and it can be easily managed using .float-left utility (which would then be opt-in).

The better way around IMHO would be to add clear utilities.